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+