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.
Built-in progress bar
Sizes
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"
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 );
Original Ladda UI concept by Hakim El Hattab / @hakimel, examples adapted to work with Bootstrap 3 by @msurguy