使用方法:
在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加载动画