spin.js

Example

Features

• No images, no external CSS
• No dependencies
• Highly configurable
• Resolution independent
• Works in all major browsers, including IE6
• Smaller than an animated GIF (3K minified, 1.7K gzipped)
• MIT License

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 $this = $(this),
        spinner = $this.data('spinner');

    if (spinner) spinner.stop();
    if (opts !== false) {
      opts = $.extend({color: $this.css('color')}, opts);
      spinner = new Spinner(opts).spin(this);
      $this.data('spinner', spinner);
    }
  });
  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.

Hosted on GitHub