Minimal Button Loading Indicator With jQuery And Font Awesome

File Size: 3.66 KB
Views Total: 2623
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.