# spin.js

spin.js spin.min.js

## Example

Lines:
Length:
Width:
Radius:
Rotate:
Trail:
Speed:
Shadow:
Hwaccel:
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings.

## 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.