Ladda for Bootstrap 3 Button Loading Progress Plugin
Add-ons
Plugin Description: Ladda allows you to display a loading progress effect inside a button when it is clicked.
Usage
Add the bootstrap.css stylesheet, spin.min.js, and ladda.min.js to your page.
1 2 3 | <script src="dist/spin.min.js"></script><script src="dist/ladda.min.js"></script> |
Then add a button with the following styles:
1 | <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button> |
Or use an "a" tag:
1 | <a href="#" class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></a> |
You can select a style by setting the data-style attribute:
1 2 3 4 5 6 7 8 9 10 11 | 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 control the size by setting the data-size attribute:
1 2 3 | data-size="xs"data-size="s"data-size="l" |
You can choose the spinner color by setting the data-spinner-color attribute (hex code):
1 | data-spinner-color="#FF0000" |
Control the UI state with JavaScript:
1 | Ladda.bind( 'input[type=submit]' ); |
When using AJAX forms, you can use the following syntax:
1 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(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 can be called through JavaScript
评论