Ladda UI for Bootstrap 3

Demo Click the buttons to see the effect

Usage:

---

Include the CSS and Javascript for Spin.js and Ladda effect:

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

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

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

Then to produce a button with the Ladda effect:

<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>

Or using "a" tag:

<a href="#" class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></a>

You can choose the style of the effect by setting the data-style attribute:

data-style="expand-left"

data-style="expand-left"

data-style="expand-right"

data-style="expand-up"

data-style="zoom-in"

data-style="zoom-out"

data-style="slide-left"

data-style="slide-right"

data-style="slide-up"

data-style="slide-down"

data-style="contract"

You can choose the size of the spinner by setting the data-size attribute:

data-size="xs"

data-size="s"

data-size="l"						

You can choose the color of the spinner by setting the data-spinner-color attribute (HEX code):

data-spinner-color="#FF0000"

Control the UI state with Javascript:

To activate the effect you can bind Ladda to all buttons that submit a form

Ladda.bind( 'input[type=submit]' );

When using AJAX forms, you can use the following syntax:

<a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">Submit form</span></a>

$(function() {

	$('#form-submit').click(function(e){

	 	e.preventDefault();

	 	var l = Ladda.create(this);

	 	l.start();

	 	$.post("your-url", 

	 	    { data : data },

	 	  function(response){

	 	    console.log(response);

	 	  }, "json")

	 	.always(function() { l.stop(); });

	 	return false;

	});

});

Other methods available through Javascript

l.stop();

l.toggle();

l.isLoading();

l.setProgress( 0-1 );