Minimal Button Loading Indicator With jQuery And Font Awesome

Just another inline loading indicator plugin for action buttons that convert the icon inside the button into an animated Font Awesome spinner when clicked.

See also:

• 10 Best Loading Spinner Plugins
• 80+ Best Pure CSS Loading Spinners For Front-end Developers
• 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries

How to use it:

1. Load the necessary jQuery library and Font Awesome Iconic Font in the document.

<link rel="stylesheet" href="/path/to/cdn/fontawesome.css" />
<script src="/path/to/cdn/jquery.min.js"></script>

2. Insert a Font Awesome icon into your action button.

<a class="btn">
  <i class="fas fa-address-card"></i> 
  Click Me
</a>

3. Start the loading indicator inside the button.

$("a").on("click", function(ev) {
  ev.preventDefault();
  $(this).startLoading();
});

4. Stop the loading indicator and restore the original icon after the action is finished.

$("a").stopLoading();

 

---

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