Minimal Circle Loading Indicator - jquery-spinner.js

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.