ladda ajax,Ladda for Bootstrap 3 UI

Usage:

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

Then to produce a button with the Ladda effect:

expand-left

Or using "a" tag:

expand-left

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:

Submit form

$(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