Minimal Button Loading Indicator With jQuery And Font Awesome

Minimal Button Loading Indicator With jQuery And Font Awesome
File Size: 3.66 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.