背景：
在请求后台的“漫长”等待过程中，为了提升用户体验，需要一个类似 
的加载动画效果，让用户明确现在处于请求过程中，而不是机子down掉或者网站死了
静态demo（未与后台交互）：
HTML代码如下
<!doctype html> <html> <head> <title>Test Spin Demo</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://spin.js.org/spin.min.js" ></script> <style> #Div{ width: 100%; height: 100%; text-align:center; } #firstDiv{ width: 100%; height: 50%; } #secondDiv{ width: 50%; height: 50%; margin:0 auto; } </style> <script type="text/javascript"> //opts 样式可从网站在线制作 var opts = { lines: 13, // 花瓣数目 length: 20, // 花瓣长度 10, // 花瓣宽度 radius: 30, // 花瓣距中心半径 corners: 1, // 花瓣圆滑度 (0-1) rotate: 0, // 花瓣旋转角度 direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针 color: '#000', // 花瓣颜色 speed: 1, // 花瓣旋转速度 trail: 60, // 花瓣旋转时的拖影(百分比) shadow: false, // 花瓣是否显示阴影 hwaccel: false, //spinner 是否启用硬件加速及高速旋转 className: 'spinner', // spinner css 样式名称 zIndex: 2e9, // spinner的z轴 (默认是2000000000) top: '25%', // spinner 相对父容器Top定位 单位 px left: '50%'// spinner 相对父容器Left定位 单位 px }; var spinner = new Spinner(opts); $(document).ready(function () { $("#btnRequest").bind("click", function () { Request(); }); $("#btnRequest2").bind("click", function () { Request2(); }); }) function Request(){ //请求时spinner出现 var target = $("#firstDiv").get(0); spinner.spin(target); } function Request2(){ //关闭spinner spinner.spin(); } </script> </head> <body> <div id="Div"> <div id="firstDiv"> </div> <div id="secondDiv"> <input id="btnRequest" type="button" value="显示加载" class="btnStyle" /> <input id="btnRequest2" type="button" value="隐藏加载" class="btnStyle" /> </div> </div> </body> </html>
提示：
一、其中opts样式可在http://spin.js.org/在线制作与测试
var opts = { lines: 13, // 花瓣数目 length: 20, // 花瓣长度 10, // 花瓣宽度 radius: 30, // 花瓣距中心半径 corners: 1, // 花瓣圆滑度 (0-1) rotate: 0, // 花瓣旋转角度 direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针 color: '#000', // 花瓣颜色 speed: 1, // 花瓣旋转速度 trail: 60, // 花瓣旋转时的拖影(百分比) shadow: false, // 花瓣是否显示阴影 hwaccel: false, //spinner 是否启用硬件加速及高速旋转 className: 'spinner', // spinner css 样式名称 zIndex: 2e9, // spinner的z轴 (默认是2000000000) top: '25%', // spinner 相对父容器Top定位 单位 px left: '50%'// spinner 相对父容器Left定位 单位 px };
二、spin.js+自制遮罩（暂时还没有找到插件本身自带的遮罩层）
背景：想要在显示加载状态时，父层为不可编辑状态
在页面最后、</body>之前添加div遮罩层
<div id="mb"></div>
设置遮罩层的样式
#mb{ display: none; height: 100%; width: 100%; position: fixed; *position: absolute; *height: 1380px; background: black; top:0; left: 0; opacity:0.6; }
最后通过js控制遮罩的显示与隐藏
//显示 $("#mb").css("display","block"); var target = $(".firstDiv").get(0); spinner.spin(target); //隐藏 $("#mb").css("display","none"); spinner.spin();
效果如下，此时父层为不可编辑状态：
