Minimal Ladda Button Plugin For jQuery - loadingBtn.js
File Size: | 3.81 KB |
---|---|
Views Total: | 2093 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

loadingBtn.js is a tiny jQuery for ladda buttons, which lets you add an inline loading status indicator to an action button of your choice (typically a submit button for ajax form submitting). Compatible with Bootstrap framework.
Alternative plugins:
- Buttons with Built-in Loading Indicators For Bootstrap 3 - Ladda Bootstrap
- jQuery Plugin For Built-In Loading Indicator In Buttons - Button Loader
- Form Submit Buttons with Built-in Loading Indicators - Ladda
How to use it:
1. Import the latest version of jQuery library and the loadingBtn.js
script into the document.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="dist/bootstrap-loadingbtn.js"></script>
2. Apply the loading indicator to your buttons as follows:
<button type="button" class="btn"> Button </button>
// loading $(".btn").loadingbtn('loading'); // success $(".btn").loadingbtn('success'); // fail $(".btn").loadingbtn('fail'); // reset the button on fail $(".btn").loadingbtn('fail',{reset:false}); // reset the button manually $(".btn").loadingbtn('reset');
3. Event listeners available.
$('.btn').on('loading.bs.loadbtn',function(){ console.log('loading.bs.loadbtn Loading') }) $('.btn').on('success.bs.loadbtn',function(){ console.log('success.bs.loadbtn Success') }) $('.btn').on('fail.bs.loadbtn',function(){ console.log('success.bs.loadbtn Failed') }) $('.btn').on('reset.bs.loadbtn',function(){ console.log('reset.bs.loadbtn Rest') })
4. Customize the ladda button.
$('.btn-add-success').loadingbtn('config',{ html:false, // allows html normalTpl:'Submit', successTpl:'Success', loadingTpl:'Loading...', dangerTpl:'Failed', });
This awesome jQuery plugin is developed by wenyuking. For more Advanced Usages, please check the demo page or visit the official website.