Test Ladda with Bootstrap 3

by Alexander Terehov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hakimel/Ladda/css/demo.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hakimel/Ladda/dist/ladda-themeless.min.css">
<script src="https://cdn.jsdelivr.net/gh/hakimel/Ladda/dist/spin.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hakimel/Ladda/dist/ladda.min.js"></script>
<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>
				<h3>expand-left</h3>
				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Submit</span></button>
			</section>

			<section>
				<h3>expand-right</h3>
				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-right"><span class="ladda-label">Submit</span></button>
			</section>

			<section>
				<h3>expand-up</h3>
				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-up"><span class="ladda-label">Submit</span></button>
			</section>

			<section>
				<h3>expand-down</h3>
				<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-down"><span class="ladda-label">Submit</span></button>
			</section>


			<section>
				<h3>zoom-in</h3>
				<button class="btn btn-info ladda-button" data-color="red" data-style="zoom-in"><span class="ladda-label">Submit</span></button>
			</section>

			<section>
				<h3>zoom-out</h3>
				<button class="btn btn-info ladda-button" data-color="red" data-style="zoom-out"><span...

JavaScript

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

// Bind progress buttons and simulate loading progress
Ladda.bind( 'section.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 );
	}
} );