先看效果圖：
1、引入easyui所需要的js和css
<link href="plugins/easyui1_7_0/themes/default/easyui.css" rel="stylesheet" />
<link href="plugins/easyui1_7_0/themes/icon.css" rel="stylesheet" />
<script src="plugins/easyui1_7_0/jquery.min.js"></script>
<script src="plugins/easyui1_7_0/jquery.easyui.min.js"></script>
<script src="plugins/easyui1_7_0/locale/easyui-lang-zh_CN.js"></script>
2、編寫等待的css動畫特效
這段特效是在網上找到的
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:10px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}
3、編寫JS
3.1寫一個函數 通過時間獲得隨機數，用來作爲生成的div的ID
const now = new Date();
let month = now.getMonth() + 1;
let day = now.getDate();
let hour = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
return "eloading_"+now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 23 + 100)).toString();
3.2生成html
因爲用到了easyui的window，因此需要在最外層給一個div class爲easyui-window，並根據easyui的文檔設置title等window相關option
window內是一個class爲content的div，content裏面放加載動畫效果，加載中的動畫結構是一個class爲loading的div，裏面放4個span即可
window需要隱藏關閉按鈕、邊框、頭部標題欄
所以option爲
{collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true}
nohead爲不顯示頭部標題欄 ，closable：false不顯示關閉按鈕 modal:true顯示遮罩層（其他部分不能被點擊）border:false 隱藏邊框
直接上代碼
let html = '<div id="'+loadId+'" class="easyui-window" title="數據正在加載中" data-options="collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true" style="width: 300px; height: auto; padding: 10px;background: rgba(255, 255, 255,0.8)">';
html+='<div class="content" style="width:100%;">';
html+='<div class="loading" style="margin-left: 110px; margin-top: 20px;">\n<span></span>\n<span></span>\n<span></span>\n<span></span>\n<span></span></div>';
html+='<div style="margin-top:15px;text-align:center;color:red;font-size:10px;">'+text+'</div></div></div>';
詳情參閱easyui的window 。
3.3上面的html添加到<body>節點裏面
$("body").append(html);
3.4顯示加載中提示動畫
用dialog的open即可顯示
$("#"+你的id).dialog('open');
3.5 加載完成關閉提示動畫
$('#'+你的id).dialog('close');
3.6銷燬
爲了不讓頁面很累贅，對剛纔生成的彈出層節點進行銷燬
$("#"+this.id).parent().next(".window-shadow").next(".window-mask").remove();
$("#"+this.id).parent().next(".window-shadow").remove();
$("#"+this.id).parent().remove();
如此，全部完成。
我把它寫成了一個插件，以下是全部js代碼：
var easyloading = {
init: function (text) {
let loadingobj={};
if (text == undefined || text == null) {
text = "正在拼了命的爲您加載中";
}
const loadId=easyloading.getid();
let html = '<div id="'+loadId+'" class="easyui-window" title="數據正在加載中" data-options="collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true" style="width: 300px; height: auto; padding: 10px;background: rgba(255, 255, 255,0.8)">';
html+='<div class="content" style="width:100%;">';
html+='<div class="loading" style="margin-left: 110px; margin-top: 20px;">\n<span></span>\n<span></span>\n<span></span>\n<span></span>\n<span></span></div>';
html+='<div style="margin-top:15px;text-align:center;color:red;font-size:10px;">'+text+'</div></div></div>';
$("body").append(html);
loadingobj.id=loadId;
loadingobj.init=false;
loadingobj.show=function(){
console.log(this.id);
if(!this.init){
$('#'+this.id).window({collapsible:false,minimizable:false,maximizable:false,closable:false,modal:true,closed:true,border:false,noheader:true});
this.init=true;
}
$('#'+this.id).dialog('open');
};
loadingobj.close=function(){
$('#'+this.id).dialog('close');
}
loadingobj.dispose=function(){
$("#"+this.id).parent().next(".window-shadow").next(".window-mask").remove();
$("#"+this.id).parent().next(".window-shadow").remove();
$("#"+this.id).parent().remove();
this.init=false;
return undefined;
}
return loadingobj;
},
getid:function(){
const now = new Date();
let month = now.getMonth() + 1;
let day = now.getDate();
let hour = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
return "eloading_"+now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 23 + 100)).toString();
}
};
完整的demo源代碼：