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+