Spin.js-CSS动画进度加载器

spin.js是一款非常简单的CSS加载器，他是一款使用了VML（Vector Makeup Language）的CSS动画效果。

spin.js的特性

他有着非常强大的适应性，有着以下几个特性：

1.    没有额外的图片，也没有增加的外部CSS文件

2.    不需要依赖于其他工具，对于jQuery而言，它支持jQuery，但是jQuery并非必须的

3.    有很高的可配置性

4.    与分辨率无关

5.    浏览器兼容性很好，在低版本的IE上，采用VML支持

6.    使用了@keyframe动画，在不支持@keyframe的浏览器上，使用setTimeout()

7.    支持所有的主流浏览器，包括IE6

spin.js的使用

spin.js动态创建进度条，并且是圆圈进度动画，它的高配置表现在可以配置颜色，放射线的宽度和长度，旋转是逆时针还是顺时针，还有旋转的速度。你可以设置一个数组，来存储这个进度条的属性：

1.    var opts={

2.    lines:11, // 圆圈中线条的数量

3.    length: 29, // 每条线的长度

4.    width: 10, //每条线的宽度

5.    radius: 30, //每条线的圆角半径

6.    corners: 1, //角落圆度，从0到1

7.    rotate: 0, //旋转偏移量

8.    direction: 1, //旋转方向，其中1表示顺时针，0表示逆时针

9.    color: '#FFF', // 颜色

10.  speed: 1, //旋转速率，单位为转速/秒

11.  trail: 60, //余晖的百分比，即颜色变化的百分比

12.  shadow: false, //是否显示阴影

13.  hwaccel: false, //是否使用硬件加速

14.  className: 'spinner', // 绑定到spinner上的class名称

15.  zIndex: 2e9, //定位层，默认值是2000000000

16.  top: 'auto', // 相对父元素的向上定位，单位是px

17.  left: 'auto' // 相对父元素的向左定位，单位是px

18.  };

然后结合jQuery使用spin.js非常简单，只需要在选定的元素上，使用spin()方法就可以了，将上面设定的设置作为参数传入：

1.    $("#loading").spin(opts);

停止加载动画效果也非常简单，只需要将false作为参数传入spin方法就可以：

1.    $("#loading").spin(false);

而针对jQuery，spin.js还提供了更为简单的设置，可以传入tiny，small，large来简单设置圆圈的大小，其默认的设置中，圆圈的线条是9根，每条线的长度是10px，宽20px。对于tiny，small，large的设置如下：

·       tiny: {lines: 8, length: 2, width: 2, radius: 3 }

·       small: {lines: 8, length: 4, width: 3, radius: 5 }

·       large: {lines: 10, length: 8, width: 4, radius: 8 } 

spin.js的浏览器支持

spin.js支持所有的主流浏览器，其中包括：

·       Chrome

·       Safari3.2+

·       Firefox3.5+

·       IE6,7,8,9

·       Opera10.6+

·       MobileSafari (iOS 3.1+)

·       Android2.3+

spin.js的演示

在本文中的示例，大家在演示中可以看到旋转的进度条，而当你点击在进度条上面的时候，代码通过传入false参数，将进度条停止并隐藏。

其他演示和库文件下载，请参见IT在线教育平台——麦子学院

任何问题，可以联系我~