Buttons with Built-in Loading Indicators For Bootstrap 3 - Ladda Bootstrap

Ladda Bootstrap is a javascript loading library inspired by Ladda.js that helps you create Built-in Loading Indicators (spinner, loading bar, etc...) with New twitter's bootstrap 3. 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.

Note that the plugin is no longer maintained. Please use the Ladda.js instead.

Basic Usage:

1. Include Bootstrap 3 CSS on your web page

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

2. Include Ladda Bootstrap files and needed spin.js on the web page

<script src="dist/spin.min.js"></script> 
<script src="dist/ladda.min.js"></script>
<link rel="stylesheet" href="dist/ladda-themeless.min.css">

3. Create a button with loading state. Using html5 data-* attributes to custom the loading style

<button 
class="ladda-button" 
data-style="expand-right"
data-color="green"
data-size="medium"
data-spinner-size="40"
data-spinner-color="#ff0000"
>
<span class="ladda-label">Submit</span>
</button>

4. All the loading animations

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"

---

This awesome jQuery plugin is developed by msurguy. For more Advanced Usages, please check the demo page or visit the official website.