Spin.js:CSS无图片实现动态加载loading进度动画

Spin.js是一个用于创建过程进度提醒控件的框架，使用CSS3来渲染UI，当浏览器不支持时，采用VML支持。不需要图片，没有外部CSS，没有依赖其它框架。高度可配置，分辨率无关，兼容所有主流浏览器包括IE6，比一个GIF动画图片还小。

spin.js

用法：

var opts = {
  lines: 13 // The number of lines to draw（圆圈中线条的数量）
, length: 28 // The length of each line（每条线的宽度）
, width: 14 // The line thickness（每条线的圆角半径）
, radius: 42 // The radius of the inner circle（每条线的圆角半径）
, scale: 1 // Scales overall size of the spinner（整体尺寸的微调）
, corners: 1 // Corner roundness (0..1)（角落圆度，从0到1）
, color: '#000' // #rgb or #rrggbb or array of colors（颜色）
, opacity: 0.25 // Opacity of the lines（线条透明度）
, rotate: 0 // The rotation offset（旋转偏移量）
, direction: 1 // 1: clockwise, -1: counterclockwise（旋转方向，其中1表示顺时针，0表示逆时针）
, speed: 1 // Rounds per second（旋转速率，单位为转速/秒）
, trail: 60 // Afterglow percentage（余晖的百分比，即颜色变化的百分比）
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)（定位层，默认值是2000000000）
, className: 'spinner' // The CSS class to assign to the spinner（绑定到spinner上的class名称）
, top: '50%' // Top position relative to parent（相对父元素的向上定位，单位是px）
, left: '50%' // Left position relative to parent（相对父元素的向左定位，单位是px）
, shadow: false // Whether to render a shadow（是否显示阴影）
, hwaccel: false // Whether to use hardware acceleration（是否开启硬件加速）
, position: 'absolute' // Element positioning（元素的定位）
}

var target = document.getElementById('foo')
var spinner = new Spinner(opts).spin(target);

特点：

1. 没有额外的图片，也没有增加的外部CSS文件
2. 不需要依赖于其他工具，对于jQuery而言，它支持jQuery，但是jQuery并非必须的
3. 有很高的可配置性
4. 与分辨率无关
5. 浏览器兼容性很好，在低版本的IE上，采用VML支持
6. 使用了@keyframe动画，在不支持@keyframe的浏览器上，使用setTimeout()
7. 支持所有的主流浏览器，包括IE6

浏览器支持：

Spin.js 已在以下浏览器测试成功:

1. Chrome
2. Safari 3.2+
3. Firefox 3.5+
4. IE 6,7,8,9,10,11
5. Opera 10.6+
6. Mobile Safari (iOS 3.1+)
7. Android 2.3+

最新版本：
Version 2.1.2 (28.05.2015)

下载地址：
spin.js
spin.min.js

转载请注明：前端收藏 » Spin.js:CSS无图片实现动态加载loading进度动画