jQuery加载动画

使用方法：
在JSP中引入spin.js：

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

在需要弹出加载动画的地方添加如下代码：

var opts = {
 lines:  13,  // The number of lines to draw
 length:  20,  // The length of each line
 width:  10,  // The line thickness
 radius:  30,  // The radius of the inner circle
 corners:  1,  // Corner roundness (0..1)
 rotate:  0,  // The rotation offset
 direction:  1,  // 1: clockwise, -1: counterclockwise
 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
 zIndex:  2e9,  // The z-index (defaults to 2000000000)
 top:  '50%',  // Top position relative to parent
 left:  '50%'  // Left position relative to parent
};
var target = document.getElementById( 'loading');
var spinner =  new Spinner(opts).spin(target);   //开始加载
spinner.spin();   //停止加载

这款插件可以配合全屏透明遮罩来使用，效果就是弹出加载动画之后，主页面变灰，加载结束后，主页面恢复。使用方法：
在JSP页面中加入如下代码：

<div  id= "loading" ></div>
<div  id= "pageOverlay"  style= "visibility:hidden;" ></div>

第一个div中放的是Spin加载动画，第二个div即遮罩层。设置遮罩层CSS样式：

#pageOverlay {  position: fixed;  top: 0;  left: 0;  z-index: 1987;  width: 100%;  height: 100%;  background: #fff; filter:alpha( opacity= 70);  opacity: 0. 7; }

开启遮罩层：

document.getElementById( 'pageOverlay').style.visibility =  'visible';   //通常放在var spinner = new Spinner(opts).spin(target);之前

关闭遮罩层：

document.getElementById( 'pageOverlay').style.visibility =  'hidden';   //通常放在spinner.spin();之后

附注：
如果在JS中某一个函数需要执行一段时间，我们想在函数执行过程中出现加载动画，函数执行完毕结束加载动画。而直接使用如上代码可能导致函数执行完毕后加载动画才出现，达不到预想效果，这时候需要配合JS的setTimeout函数来使用。实例：

/*批准待办任务*/
function approveTask(taskId,processInstanceId){
   document.getElementById( 'pageOverlay').style.visibility =  'visible';
    var opts = {
           lines:  12,  // The number of lines to draw
           length:  20,  // The length of each line
           width:  10,  // The line thickness
           radius:  30,  // The radius of the inner circle
           corners:  1,  // Corner roundness (0..1)
           rotate:  0,  // The rotation offset
           direction:  1,  // 1: clockwise, -1: counterclockwise
           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
           zIndex:  2e9,  // The z-index (defaults to 2000000000)
           top:  '50%',  // Top position relative to parent
           left:  '50%'  // Left position relative to parent
       };
    var target = document.getElementById( 'loading');
    var spinner =  new Spinner(opts).spin(target);
   
   setTimeout(
    function(){
        var eiinfo =  new EiInfo();
       eiinfo.set( "taskId", taskId);
       eiinfo.set( "processInstanceId", processInstanceId);
       EiCommunicator.send( "FKRW0001",  "approveTask", eiinfo, {
           onSuccess :  function(outInfo) {
               EiCommunicator.send( "FKXX0001",  "sentMessage", eiinfo,  null);   //发送消息
               loadTaskList();
               spinner.spin();
               document.getElementById( 'pageOverlay').style.visibility =  'hidden';
           },
           onFail :  function(message) {
               alert(message);
           }
       });
   }, 1000);
}

转载请注明：观测者 » jQuery加载动画