jQuery CanvasSpinner

What?

A HTML5 <canvas /> based loading spinner, for use within web applications.

Easily resizable,
Supports full alpha transparency,
Massively Customizable,
Lightweight at only 1.2kb (For the minified JS),
Smaller than most spinner .gifs on ajaxload.info,
Backwards compatible with older browsers with a method for displaying .gifs

Demos

Usage

Include the jQuery & .js file in your document:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-spinner.min.js" type="text/javascript"></script>

Basic usage. The plugin will automatically size the spinner to fit within the container.

$('div.loading').spinner();

With options:

$('div.loading').spinner({
      sqr: 40,// The width/ height of the spinner
      framerate : 10, // The number of frames per second,
      rotation : 0 // The number of degrees the spinner 
                      should rotate per frame
      spokeCount : 16, // The number of spokes in the spinner
      spokeOffset : {
        inner : 8, // The inner radius of the spinner in px
        outer : 15 // The outer radius of the spinner in px
      },
      spokeWidth : 3 // The the width of each spoke in px
      colour : '255,255,255', // Must be an RGB string
      backup : 'images/spinner.gif', // The path to the backup image
      centered : true // Toggles auto centering of the spinner
});

To Remove a spinner just call:

$('div.loading').clearSpinner();

Download

You can also clone the project with Git by running:

$ git clone git://github.com/BBB/jquery-canvasspinner