This time I will share jQuery Plugin and tutorial about Simplest Ajax Loader With jQuery And CSS3 – jmspinner, hope it will help you in programming stack.
jmspinner is a really simple jQuery plugin that shows a CSS3 powered loading indicator while data in specific area is loading via AJAX requests.
How to use it:
1. Load the stylesheet ‘jm.spinner.css’ for the animated loading indicator.
1 |
<link href="jm.spinner.css" rel="stylesheet"> |
2. Load jQuery library (slim build) and the JavaScript file at the end of the document.
1 |
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> |
2 |
<script src="jm.spinner.js"></script> |
3. Enable the loading indicator in a specific container.
4. Or even the whole document.
5. Apply your own styles & position to the loading indicator:
6. Change the default size of the loading indicator:
2 |
$('.box').jmspinner('large'); |
5 |
$('.box').jmspinner('small'); |
7. Remove the loading indicator when the data is completely loaded.
1 |
$('.box').jmspinner(false); |
This awesome jQuery plugin is developed by pejonic. For more Advanced Usages, please check the demo page or visit the official website.
