Merge Loading indicators Into Action Buttons - jQuery loadButton.js

Yet another jQuery plugin to create custom loading spinners inside action buttons that indicate the current status of invoked actions. Also known as Ladda Button.

Licensed under the GNU General Public License v3.0.

How to use it:

1. Include the latest Font Awesome for the animated loading spinner.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

2. Create an action button on the webpage.

<button id="example">
  Submit
</button>

3. Include the JavaScript file jquery.loadButton.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.loadButton.js"></script>

4. Show the loading spinner inside the submit button on click.

$("#example").on('click', function(){
  $(this).loadButton('on');
});

5. Hide the loading spinner.

$("#example").loadButton('off');

6. Customize the loading spinner.

$("#example").on('click', function(){
  $(this).loadButton('on',{
    faClass: 'fas',
    faIcon: 'fa-cog',
    doSpin: true
  });
});

7. Customize the loading text.

$("#example").on('click', function(){
  $(this).loadButton('on',{
    loadingText: 'Loading...',
  });
});

8. Customize background/foreground colors of the action button when the loading is processing.

$("#example").on('click', function(){
  $(this).loadButton('on',{
    loadingBackground: 'darkred',
    loadingForeground: 'white'
  });
});

---

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