jQuery Plugin For Built-In Loading Indicator In Buttons - Button Loader

Button Loader is a jQuery plugin for html buttons that trigger a deferred call and display a loading indicator in the button itself. The goal is to bind a spinner element to your button and change the button text when you click on an action button.

See also:

• Buttons with Built-in Loading Indicators For Bootstrap 3 - Ladda Bootstrap
• Form Submit Buttons with Built-in Loading Indicators - Ladda

How to use it:

1. Load Font Awesome 4 for animated loading spinners.

<link rel="stylesheet" href="font-awesome.min.css">

2. Load jQuery library and the jQuery Button Loader plugin's files in the page.

<link href="buttonLoader.css" rel="stylesheet">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.buttonLoader.js"></script>

3. The JavaScript to start the loading animation in the button.

$('.button-class').click(function () {
  var btn = $(this);
  $(btn).buttonLoader('start');
  setTimeout(function () {
    $(btn).buttonLoader('stop');
  }, 5000);
});

Change log:

2016-08-01

• JS update

---

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