Create An Android Holo Themed Loading Spinner with jQuery and Html5

A lightweight jQuery plugin that uses Javascript and Html5 canvas to create a circular, animated, Android Holo themed loading spinner for your dynamic content loaded with AJAX.

How to use it:

1. Load the jQuery library and the jQuery Android Loading Spinner plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.androidSpinner.js"></script>

2. Create a container element for the loading spinner.

<div id="ajax-loader"></div>

3. Enable the plugin and draw an Ajax loader within the container you just created.

<script>
document.addEventListener( "DOMContentLoaded", function () {
$( "#ajax-loader" ).ajaxLoader( {
lineWidth: 33,
top: {
color: "#4b98eb"
},
bottom: {
color: "#377fcc"
}
} );
}, false );
</script>

4. Don't forget to set the height and width of the Ajax loader via CSS.

#ajax-loader {
width: 300px;
height: 300px;
}

5. Available settings to customize the Ajax loader.

size: 30,
lineWidth: 4,
top: {
  color: "rgb(233, 233, 233)",
  direction: 1,
  gradientRange: [0.05, 0.8],
  rotationRate: 4,
  steps: 64
},
bottom: {
  color: "rgb(233, 233, 233)",
  direction: -1,
  gradientRange: [0, 1],
  rotationRate: 4,
  steps: 64
}

---

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