spin.js插件的转圈加载效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先上插件链接地址：http://fgnass.github.io/spin.js/

以下是使用spin.js插件的完整版测试例子：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test_storage</title>
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var opts = {
lines: 13, // The number of lines to draw |小长条的数量
length: 13, // The length of each line |小长条的长度
width: 3, // The line thickness |小长条的宽度
radius: 15, // The radius of the inner circle |内环的半径长
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset |旋转角度
direction: 1, // 1: clockwise, -1: counterclockwise |1：顺时针方向 -1：逆时针方向
color: '#000', // #rgb or #rrggbb or array of colors |颜色
speed: 1, // Rounds per second |每秒转多少圈
trail: 60, // 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 |类名spinner
zIndex: 2e9, // The z-index (defaults to 2000000000) |显示在最顶层
top: 'auto', // Top position relative to parent in px |相对父元素的top
left: 'auto' // Left position relative to parent in px |相对父元素的left ，默认情况spinner是显示于父元素居中位置
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);//给id为foo的div 中绑上spinner//或者使用spinner.el属性插入DOM /* 如下 */