Ladda UI for Bootstrap 3

This project was made by @msurguy and is used on the new Bootsnipp - a playground and collection of snippets for Bootstrap.

Original UI concept by @hakimel 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.

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-right"
data-style="expand-up"
data-style="expand-down"
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 );

Love this? Tweet it!

Original Ladda UI concept by Hakim El Hattab / @hakimel, examples adapted to work with Bootstrap 3 by @msurguy