Color And Voice: spin.js - It's the little things in life that are awesome

spin.js spin.min.js

Features

No images, no external CSS

No dependencies

Highly configurable

Resolution independant

Works in all major browsers, including IE6

Smaller than an animated GIF (2.8K minified, 1.7K gzipped)

MIT License

Example

How it works

Spin.js uses the CSS3 to render the UI, falling back to VML Internet Explorer. If supported by the browser, @keyframe rules are used to animate the spinner.

Usage
var opts = { lines: 12, // The number of lines to draw length: 7, // The length of each line width: 5, // The line thickness radius: 10, // The radius of the inner circle color: '#000', // #rbg or #rrggbb speed: 1, // Rounds per second trail: 100, // Afterglow percentage shadow: true // Whether to render a shadow }; var target = document.getElementById('foo'); var spinner = new Spinner(opts).spin(target);
The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

Manual positioning

In order to manually position the spinner, invoke spin() without arguments and use the el property to access the HTML element:
var spinner = new Spinner().spin(); target.appendChild(spinner.el);
The returned element is a DIV with position:relative and no height. The center of the spinner is positioned at the top left corner of this DIV.

Hiding the spinner

To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.

jQuery plugin

Spin.js does not require jQuery. Anyway, if you use jQuery (or zepto.js) you may use the following plugin:
$.fn.spin = function(opts) { this.each(function() { var spinner = $(this).data('spinner'); if (spinner) spinner.stop(); if (opts !== false) { $(this).data('spinner', new Spinner(opts).spin(this)); } }); return this; }
Supported browsers

Spin.js has been successfully tested in the following browsers:

Chrome

Safari 4+

Firefox 3.5+

IE 6,7,8,9+

Opera 10.6+

Mobile Safari (iOS 4)

Contact

If you encounter any problems, please use the GitHub issue tracker.
For updates follow me on Twitter.
If you like spin.js and use it in the wild let me know.