seimin
/
zuel-itsm-3.0.2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Ladda</title>

		<meta name="description" content="">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="dist/ladda.min.css">

		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

	</head>

	<body>

		<article class="examples">

			<div class="intro">
				<h1>Ladda</h1>
				<p>
					A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where 
					it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a 
					real-world example, check out any of the forms on <a href="http://slid.es">slid.es</a>.
				</p>
			</div>

			<section class="button-demo">
				<h3>expand-left</h3>
				<button class="ladda-button" data-color="green" data-style="expand-left">Submit</button>
			</section>

			<section class="button-demo">
				<h3>expand-right</h3>
				<button class="ladda-button" data-color="green" data-style="expand-right">Submit</button>
			</section>

			<section class="button-demo">
				<h3>expand-up</h3>
				<button class="ladda-button" data-color="green" data-style="expand-up">Submit</button>
			</section>

			<section class="button-demo">
				<h3>expand-down</h3>
				<button class="ladda-button" data-color="green" data-style="expand-down">Submit</button>
			</section>


			<section class="button-demo">
				<h3>contract</h3>
				<button class="ladda-button" data-color="red" data-style="contract">Submit</button>
			</section>

			<section class="button-demo">
				<h3>contract-overlay</h3>
				<button class="ladda-button" data-color="red" data-style="contract-overlay" style="z-index: 10;">Submit</button>
			</section>

			<section class="button-demo">
				<h3>zoom-in</h3>
				<button class="ladda-button" data-color="red" data-style="zoom-in">Submit</button>
			</section>

			<section class="button-demo">
				<h3>zoom-out</h3>
				<button class="ladda-button" data-color="red" data-style="zoom-out">Submit</button>
			</section>


			<section class="button-demo">
				<h3>slide-left</h3>
				<button class="ladda-button" data-color="blue" data-style="slide-left">Submit</button>
			</section>

			<section class="button-demo">
				<h3>slide-right</h3>
				<button class="ladda-button" data-color="blue" data-style="slide-right">Submit</button>
			</section>

			<section class="button-demo">
				<h3>slide-up</h3>
				<button class="ladda-button" data-color="blue" data-style="slide-up">Submit</button>
			</section>

			<section class="button-demo">
				<h3>slide-down</h3>
				<button class="ladda-button" data-color="blue" data-style="slide-down">Submit</button>
			</section>

			<h3 id="progress">Built-in progress bar</h3>

			<section class="progress-demo">
				<h3>expand-right</h3>
				<button class="ladda-button" data-color="purple" data-style="expand-right">Submit</button>
			</section>

			<section class="progress-demo">
				<h3>contract</h3>
				<button class="ladda-button" data-color="purple" data-style="contract">Submit</button>
			</section>

			<h3 id="sizes">Sizes</h3>

			<section class="progress-demo">
				<h3>Extra Small</h3>
				<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xs">Submit</button>
			</section>

			<section class="progress-demo">
				<h3>Small</h3>
				<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="s">Submit</button>
			</section>

			<section class="progress-demo">
				<h3>Large</h3>
				<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="l">Submit</button>
			</section>

			<section class="progress-demo">
				<h3>Extra Large</h3>
				<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">Submit</button>
			</section>

			<footer>
				<small class="sharing">
					<a href="http://twitter.com/share" class="twitter-share-button" data-text="Ladda - Buttons with built-in loading indicators by @hakimel" data-url="http://lab.hakim.se/ladda" data-count="small" data-related="hakimel"></a>
				</small>
				<small class="outro">by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
			</footer>

		</article>

		<script src="dist/spin.min.js"></script>
		<script src="dist/ladda.min.js"></script>

		<script>

			// Bind normal buttons
			Ladda.bind( '.button-demo button', { timeout: 2000 } );

			// Bind progress buttons and simulate loading progress
			Ladda.bind( '.progress-demo button', {
				callback: function( instance ) {
					var progress = 0;
					var interval = setInterval( function() {
						progress = Math.min( progress + Math.random() * 0.1, 1 );
						instance.setProgress( progress );

						if( progress === 1 ) {
							instance.stop();
							clearInterval( interval );
						}
					}, 200 );
				}
			} );

			// You can control loading explicitly using the JavaScript API
			// as outlined below:

			// var l = Ladda.create( document.querySelector( 'button' ) );
			// l.start();
			// l.stop();
			// l.toggle();
			// l.isLoading();
			// l.setProgress( 0-1 );

		</script>

		<a class="fork" href="https://github.com/hakimel/Ladda"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>

		<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

	</body>
</html>