jQuery Plugin To Handle CSS3 Powered Spinners & Loaders - Loading.js
File Size: | 23.1 KB |
---|---|
Views Total: | 10188 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.