Minimal Circle Loading Indicator - jquery-spinner.js
File Size: | 196 KB |
---|---|
Views Total: | 6279 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal, animated circle loading indicator plugin for jQuery projects. The loading spinner is written in pure CSS/CSS3. jQuery is only used to show/hide/config the loading spinner programmatically.
How to use it:
1. Load the plugin's stylesheet jquery-spinner.min.css
and JavaScript jquery-spinner.min.js
(jQuery is bundled) in your HTML document.
<link rel="stylesheet" href="./dist/jquery-spinner.min.css" /> <script src="./dist/jquery-spinner.min.js"></script>
2. Initialize the plugin and determine the container in which you want to show the loading indicator.
<div id="container"> Any Content Here </div>
var spinner = new jQuerySpinner({ parentId: 'container' });
3. Show the loading indicator in the container.
spinner.show();
4. Hide the loading indicator in cases where your HTTP/AJAX requests are finished.
spinner.hide();
5. Config the duration of the fade in/out animation of the background overlay. Default: 300ms.
var spinner = new jQuerySpinner({ parentId: 'container', duration: 1000 });
6. Disable the loading indicator.
var spinner = new jQuerySpinner({ parentId: 'container', created: false });
This awesome jQuery plugin is developed by kangqod. For more Advanced Usages, please check the demo page or visit the official website.