Animated Circles Loading Spinner With jQuery - g-spinner

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.