Animated Circles Loading Spinner With jQuery - g-spinner

File Size: 10.4 KB
Views Total: 6844
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

3. We need a reference to the DIV element:

var $loader = $("#loader");

4. Start the loading indicator with .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:

  scale: .5 

6. Hide the loading indicator with .gSpinner("hide"):


This awesome jQuery plugin is developed by ceckenrode. For more Advanced Usages, please check the demo page or visit the official website.