Ladda UI for Bootstrap 3

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

DemoClick the buttons to see the effect

expand-leftexpand-rightexpand-upexpand-down

zoom-inzoom-out

slide-leftslide-rightslide-upslide-down

contract

Built-in progress bar

expand-rightexpand-leftcontract

Sizes

extra smallsmalllarge

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 data-style="expand-left"><span>expand-left</span></button>

Or using "a" tag:

<a href="#" data-style="expand-left"><span>expand-left</span></a>

You can choose the style of the effect by setting thedata-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 thedata-size attribute:

data-size="xs"data-size="s"data-size="l"

You can choose the color of the spinner by setting thedata-spinner-color attribute (HEX code):

data-spinner-color="#FF0000"

Control the UI state with #"#" data-style="expand-right" data-size="l"><span>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 byHakim El Hattab /@hakimel, examples adapted to work with Bootstrap 3 by@msurguy