jQuery Plugin To Handle CSS3 Powered Spinners & Loaders - Loading.js

Just another jQuery plugin used to display a fullscreen loading overlay with CSS3 animated spinners & loaders while loading/processing data in the webpage. The plugin currently comes with 7 CSS spinners & loaders and is easy to extend to use your own styles. You can find more pure CSS based spinners here. Also provides a pure JS version that works without the use of any dependencies.

How to use it:

1. Include the required CSS file loading.min.css in the head section of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/jquery.loading.min.js"></script>

2. Include the main JavaScript file jquery.loading.min.js after jQuery library.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/jquery.loading.min.js"></script>

3. Show a default loading indicator (loading overlay+loading spinner) in the webpage.

$.showLoading();  

4. Hide the loading indicator when the user clicks on the loading overlay.

$.showLoading({
  allowHide: true
});  

5. Hide the loading indicator using JavaScript.

$.hideLoading();  

6. Change the default loader style. Available loader names:

• line-pulse
• jump-pulse
• circle-turn
• circle-turn-scale
• circle-fade
• square-flip
• line-scale

$.showLoading({
  name: 'jump-pulse'
});  

7. Fire a callback function when the loading is finished.

$.showLoading({
  callback: function() {}
});  

---

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