Spin.js旋转的加载动画

转载文章：http://www.gunjidan.com/html/frontpage/65_1.html

看到Spin官网的介绍：Uses VML as fallback in IEs，说是老的IE使用VML制作效果，IE6也支持，不过网上搜了一下VML，都推荐使用SVG了，IE10已经不支持VML，不过不管这些，我们要的就是加载的效果。

我们通常制作加载的动画效果都是使用一个gif的动态图片，来实现动态加载的效果，提高用户体验。而使用Spin这个js插件，就是什么也不用，只用js或是浏览器支持的技术来实现加载效果，可以看一下下面的效果：
上面的例子就是显示加载动画和删除加载动画的例子，不多说，直接上例子，最能帮助理解：

<script type="text/javascript" src="spin.js"></script>

<div id="foo" style="width:100%;height:100px;border:1px dotted #a0a0a0;"></div>
<p>
<button onclick = "startspin()">显示加载</button>
<button onclick = "stopspin()">停止加载</button>
</p>
<script type="text/javascript">
var opts = {
lines: 10, // 画线的数量
length: 5, // 每条线的长度
width: 5, // 线的厚度
radius: 10, // 内圆的半径
corners: 1, // 角的圆度 (0..1)
rotate: 0, // 旋转的偏移
direction: 1, // 1: 顺时针, -1: 逆时针
color: '#000', // #rgb 或 #rrggbb or 颜色数组
speed: 1, // 每秒的旋转圈数
trail: 100, // 旋转余晖的百分比
shadow: false, // 是否显示阴影
hwaccel: false, // 是否使用硬件加速
className: 'spinner', // 定义spinner的css类名
position:'relative',  // 定义spinner的位置类型，和css里的position一样
zIndex: 2e9, // The z-index (默认是 2000000000)
top: '50%', // 相对于父元素的顶部偏移量
left: '50%' // 相对于父元素的左部偏移量
};
var target = document.getElementById("foo");
var spinner = new Spinner(opts);
spinner.spin(target);
function startspin(){
spinner.spin(target);
}
function stopspin(){
spinner.stop();
}
</script>

去看看演示：演示地址