Animated Circles Loading Spinner With jQuery - g-spinner
File Size: | 10.4 KB |
---|---|
Views Total: | 6763 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

g-spinner is a super small jQuery plugin to display an CSS3 animated, Google style circles loading/busy/waiting indicator when your web content is loading.
How to use it:
1. Load the minified versions of the g-spinner plugins JS & CSS in your webpage which has jQuery library loaded.
<link rel="stylesheet" href="gspinner.min.css"> <script src="jquery.min.js"></script> <script src="g-spinner.min.js"></script>
2. Create a DIV element where we want to insert the loading indicator into:
<div id="loader"> </div>
3. We need a reference to the DIV element:
var $loader = $("#loader");
4. Start the loading indicator with .gSpinner()
:
$loader.gSpinner();
5. We can scale down the default size of the spinner by passing an options object where we specify the scale of the spinner relative to it's default size, 200x200px:
$loader.gSpinner({ scale: .5 });
6. Hide the loading indicator with .gSpinner("hide")
:
$loader.gSpinner("hide");
This awesome jQuery plugin is developed by ceckenrode. For more Advanced Usages, please check the demo page or visit the official website.