首页 > 代码库 > Spin.js-CSS动画进度加载器
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在线教育平台——麦子学院
任何问题,可以联系我~
Spin.js-CSS动画进度加载器