JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://lab.hakim.se/ladda/dist/spin.min.js"></script>
<script src="http://lab.hakim.se/ladda/dist/ladda.min.js"></script>
<link rel="stylesheet" href="http://lab.hakim.se/ladda/dist/ladda.min.css">
<section class="button-demo">
 <h3>expand-left</h3>
 <button class="ladda-button btn btn-sm" data-color="green" data-style="expand-left">Submit</button>
</section>
<section class="button-demo">
 <h3>expand-right</h3>
 <button class="ladda-button btn btn-sm" data-color="green" data-style="expand-right">Submit</button>
</section>
<section class="button-demo">
 <h3>expand-up</h3>
 <button class="ladda-button btn btn-sm" data-color="green" data-style="expand-up">Submit</button>
</section>
<section class="button-demo">
 <h3>expand-down</h3>
 <button class="ladda-button btn btn-sm" data-color="green" data-style="expand-down">Submit</button>
</section>
<section class="button-demo">
 <h3>contract</h3>
 <button class="ladda-button btn btn-sm" data-color="red" data-style="contract">Submit</button>
</section>
<section class="button-demo">
 <h3>contract-overlay</h3>
 <button class="ladda-button btn btn-sm" 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 btn btn-sm" data-color="red" data-style="zoom-in">Submit</button>
</section>
<section class="button-demo">
 <h3>zoom-out</h3>
 <button class="ladda-button btn btn-sm" data-color="red" data-style="zoom-out">Submit</button>
</section>
<section class="button-demo">
 <h3>slide-left</h3>
 <button class="ladda-button btn btn-sm" data-color="blue" data-style="slide-left">Submit</button>
</section>
<section class="button-demo">
 <h3>slide-right</h3>
 <button class="ladda-button btn btn-sm" data-color="blue"...

JavaScript

// 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 );