spinjs实现加载效果

最近做的一个项目是C#客户端里面包了html页面，客户端向后台发送请求有可能费时较长，因此需要在服务器响应期间在页面实现动态加载效果。
最开始基于安全考虑所有的前端请求都是走C#同步请求，这就带来两个问题
1.同步请求用时较长，导致页面出现假死状态，请求回来之前页面渲染被阻塞
2.同步没办法使用加载效果，原因是浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线 程阻塞，不给它执行的时间。在同步请求前后showLoading/hideLoading都没办法起作用。
为了实现加载效果必须将同步请求改成异步的。
官方网站：http://spin.js.org/

使用方法
第一步：引入js包<script type="text/javascript" src="js/spin.min.js" ></script>
第二步：需要在页面定义一个菊花加载的背景，一般是个正方形的div作为target

#loadingBox
{    
    margin:40px auto 5px;
    width:300px;
    height:300px;
    border-style: solid;
    border-width: 1px;
    border-color: #DF7401;
    background: #EFF5FB;
    text-align: center;
    line-height: 300px;
    color:#2E2EFE;
}

第三步：自定义花瓣的数量大小旋转速度等参数

var opts = {
            //innerImage: {url: '../img/logo.png', width: 56, height: 56 }, //内部图片            
            lines: 13, // 花瓣数目
            length: 20, // 花瓣长度
            width: 10, // 花瓣宽度
            radius: 30, // 花瓣距中心半径
            corners: 1, // 花瓣圆滑度 (0-1)
            rotate: 0, // 花瓣旋转角度
            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color: '#5882FA', // 花瓣颜色
            speed: 1, // 花瓣旋转速度
            trail: 60, // 花瓣旋转时的拖影(百分比)
            shadow: false, // 花瓣是否显示阴影
            hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
            className: 'spinner', // spinner css 样式名称
            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
            top: 'auto', // spinner 相对父容器Top定位 单位 px
            left: 'auto', // spinner 相对父容器Left定位 单位 px
            position: 'relative', // element position
            progress: true,      // show progress tracker
            progressTop: 0,       // offset top for progress tracker
            progressLeft: 0       // offset left for progress tracker
        };

然后启动加载效果

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

停止加载

spinner.spin();

完。