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:
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:
$(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 );