Material Design Style Loading Spinner with jQuery and CSS3

A jQuery plugin used to create a Google Material Design inspired loading spinner using SVG and CSS3 transforms. Useful to use in your web application to indicate the page / content / ajax loading state.

How to use it:

1. Include the latest version of JQuery JavaScript library and the jQuery Material Spinner plugin at the end of your document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.spinner.js"></script>

2. Adding the data-spinner attribute to your container will generate a Material loading spinner automatically.

<div id="demo" data-spinner='{"radius": 100}'></div>

3. You can also generate a Material loading spinner on a specified container using JavaScript.

$('#el').spinner();

4. Customize the Material loading spinner.

// spinner size
radius: 25,

// border width
strokeWidth: 5,

// animation duration
duration: 2,

// custom color
color: '#3f88f8'

Change log:

2015-09-26

• make it a universal module

---

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