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

spin.js是一款很easy的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很easy，仅仅须要在选定的元素上，使用spin()方法就能够了。将上面设定的设置作为參数传入：

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

停止载入动画效果也很easy。仅仅须要将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在线教育平台——麦子学院

不论什么问题，能够联系我~