Minimal Ladda Button Plugin For jQuery - loadingBtn.js

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.