Ladda Bootstrap Demos

Click the buttons to see the effect

Built-in progress bar

Sizes

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

Love this? Tweet it!

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