Spin.js旋转的加载动画

转载文章：前端新兵

   看到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>

去看看演示： 演示地址