html5 spin,jQuery实用Ajax loading spin旋转指示器插件

spin.js是一款非常实用的jQuery Ajax loading spin旋转指示器插件。在页面进行ajax调用的时候，需要一个指示器来告诉用户当前正处于加载状态。该旋转指示器的作用就类似于一个无线循环的进度条。通过该旋转指示器插件，你可以自定义它的密度、大小、旋转速度和旋转方向等属性，非常方便实用。该jQuery旋转指示器的特点有：

没有使用图片，纯css制作。

没有使用外部依赖。

可配置性强。

高分辨率。

在旧的IE浏览器中使用VML回退。

实用CSS3 @keyframe动画，通过setTimeout()来回退

可以在所有的现代浏览器中工作，包括IE6。

压缩后的版本只有1.6K大小。

自由开放，使用MIT License协议。

Spin.js动态创建jQuery Ajax loading spin旋转指示器，可以完全替代使用GIF图片来作为Ajax指示器的方案。

使用方法

基本配置

new Spinner({color:'#fff', lines: 12}).spin(target);

带参数配置

var opts = {

lines: 7, // The number of lines to draw

length: 8, // The length of each line

width: 10, // The line thickness

radius: 30, // The radius of the inner circle

corners: 1, // Corner roundness (0..1)

rotate: 0, // The rotation offset

direction: 1, // 1: clockwise, -1: counterclockwise

color: '#000', // #rgb or #rrggbb or array of colors

speed: 0.8, // Rounds per second

trail: 23, // Afterglow percentage

shadow: false, // 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: '50%', // Top position relative to parent

left: '50%' // Left position relative to parent

};

var target = document.getElementById('foo');

var spinner = new Spinner(opts).spin(target);

spin()方法用于创建必要的HTML结构并开始旋转动画，如果使用一个目标元素作为参数传递，该旋转指示器将被添加到第一个子节点上，并且水平和垂直居中。

手动插入旋转指示器

如果需要手动将旋转指示器插入到HTML DOM元素中，可以使用不带参数的spin()方法，并使用el属性来接收HTML元素：

var spinner = new Spinner().spin();

target.appendChild(spinner.el);

旋转指示器位置

从2.0.0版本开始，该旋转指示器使用绝对定位，定位在距离父元素50%的地方。你可以手动指定left和top属性来改变它的位置。

Note: The spinner element is a 0×0 pixel DIV that represents the center of the spinner. Hence, if you passed {top:0, left:0} only the lower right quater of the spinner would be inside the target's bounding box.

隐藏旋转指示器

要隐藏该旋转指示器，可以调用stop()方法，该方法会将指示器的UI元素从DOM中移除，并停止旋转动画。可以使用spin()方法再次调用已经停止的旋转指示器。

作为jQuery插件使用

Spin.js不需要jQuery，如果你需要jQuery可以使用jquery.spin.js文件。

浏览器兼容

Chrome

Safari 3.2+

Firefox 3.5+

IE 6,7,8,9

Opera 10.6+

Mobile Safari (iOS 3.1+)

Android 2.3+