دکمه های لودینگ (2)

با استفاده از این پلاگین می توانید در سایت خود دکمه هایی که بعد از کلیک لودینگ می شوند داشته باشید .

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>

2-  کد html جهت استفاده پلاگین

		<div class="container">
			<div class="wrapper">
				<section>
					<h2>fill horizontal</h2>
					<button class="progress-button" data-style="fill" data-horizontal>Submit</button>
				</section>
				<section>
					<h2>fill vertical</h2>
					<button class="progress-button" data-style="fill" data-vertical>Submit</button>
				</section>
				<section>
					<h2>shrink horizontal</h2>
					<button class="progress-button" data-style="shrink" data-horizontal>Submit</button>
				</section>
				<section>
					<h2>shrink vertical</h2>
					<button class="progress-button" data-style="shrink" data-vertical>Submit</button>
				</section>
			</div>
			<div class="wrapper">
				<section>
					<h2>rotate-angle-bottom <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>
				</section>
				<section>
					<h2>rotate-angle-top <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-angle-top" data-perspective data-horizontal>Submit</button>
				</section>
				<section>
					<h2>rotate-angle-left <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-angle-left" data-perspective data-vertical>Submit</button>
				</section>
				<section>
					<h2>rotate-angle-right <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-angle-right" data-perspective data-vertical>Submit</button>
				</section>
			</div>
			<div class="wrapper">
				<section>
					<h2>rotate-side-down <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-side-down" data-perspective data-horizontal>Submit</button>
				</section>
				<section>
					<h2>rotate-side-up <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-side-up" data-perspective data-horizontal>Submit</button>
				</section>
				<section>
					<h2>rotate-side-left <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-side-left" data-perspective data-vertical>Submit</button>
				</section>
				<section>
					<h2>rotate-side-right <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-side-right" data-perspective data-vertical>Submit</button>
				</section>
			</div>
			<div class="wrapper">
				<section>
					<h2>rotate-back <br/>perspective</h2>
					<button class="progress-button" data-style="rotate-back" data-perspective data-horizontal>Submit</button>
				</section>
				<section>
					<h2>flip-open <br/>perspective</h2>
					<button class="progress-button" data-style="flip-open" data-perspective data-horizontal>Submit</button>
				</section>
				<section>
					<h2>slide-down <br/>horizontal</h2>
					<button class="progress-button" data-style="slide-down" data-horizontal>Submit</button>
				</section>
				<section>
					<h2>move-up <br/>horizontal</h2>
					<button class="progress-button" data-style="move-up" data-horizontal>Submit</button>
				</section>
			</div>
			<div class="wrapper">
				<section>
					<h2>top-line <br/>horizontal</h2>
					<button class="progress-button" data-style="top-line" data-horizontal>Submit</button>
				</section>
				<section>
					<h2>lateral-lines <br/>vertical</h2>
					<button class="progress-button" data-style="lateral-lines" data-vertical>Submit</button>
				</section>
			</div>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/progressButton.js"></script>
		<script>
		[].slice.call( document.querySelectorAll( 'button.progress-button' ) ).forEach( function( bttn ) {
			new ProgressButton( bttn, {
				callback : function( instance ) {
					var progress = 0,
						interval = setInterval( function() {
						progress = Math.min( progress + Math.random() * 0.1, 1 );
						instance._setProgress( progress );
						if (progress === 1) { instance._stop(1); clearInterval(interval); }
						}, 200);
				}
			});
		});
		</script>