spin.js

Features

• No images, no external CSS
• No dependencies (jQuery is supported, but not required)
• Highly configurable
• Resolution independent
• Uses VML as fallback in old IEs
• Uses @keyframe animations, falling back to setTimeout()
• Works in all major browsers, including IE6
• MIT License

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
  rotate: 0, // The rotation offset
  color: '#000', // #rgb or #rrggbb
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};
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

By default the spinner is centered within the target element. Alternatively you may specify a top and left option to position the spinner relative to the target element.

In order to manually insert the spinner into the DOM you can invoke the spin() method without any 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),
        data = $this.data();

    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (opts !== false) {
      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
    }
  });
  return this;
};

Alternatively you may use this advanced version written by Bradley Smith.

Supported browsers

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

• Chrome
• Safari 3.2+
• Firefox 3.5+
• IE 6,7,8,9
• Opera 10.6+
• Mobile Safari (iOS 3.1+)
• Android 2.3+

Changes

Version 1.2.5 (22.03.2012)

• Fixed a bug that prevented the VML from being displayed when Modernizr or html5shiv was used.
• Added a rotate option. See issue #60.
• The constructor property is now preserved. See issue #61.

Version 1.2.4 (28.02.2012)

• Added new config options: top, left, zIndex and className.

Version 1.2.3 (30.01.2012)

• Hardware acceleration is now disabled by default. See issue #47 and issue #41.

Version 1.2.2 (8.11.2011)

• Fixed a cross-domain issue with the dynamically created stylesheet. See issue #36.

Version 1.2.1 (5.10.2011)

• Added a sanity check. See issue #31.

Version 1.2 (16.9.2011)

• Calling spin() now invokes stop() first. See issue #28.
• Added a workaround for the IE negative margin bug. See issue #27.
• The new operator is now optional. See issue #14.
• Improved accessibility by adding aria-role="progressbar".

Version 1.1 (6.9.2011)

• Fixed a bug where the animation occasionally got out of sync in Mobile Safari and Android's built-in WebKit.
• Fixed a bug where the spinner was misplaced when the target element had a non-zero padding.
• Optimized the code for gzip compression. While the minified version got slightly larger, the zipped version now only weighs 1.7K.

Version 1.0 (16.8.2011)

• Initial release

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