效果图:
js创建loading
show = function(){
//loading dom元素
var Div = document.createElement("div");
Div.setAttribute("class","ui-loading");
var chidDiv = document.createElement("div");
chidDiv.setAttribute("class","ui-loading-mask")
Div.appendChild(chidDiv)
document.body.appendChild(Div)
}
取消loading加载
hide= function(){
var Div = document.getElementsByClassName("ui-loading");
while(Div[0].hasChildNodes()) //当div下还存在子节点时 循环继续
{
Div[0].removeChild(Div[0].firstChild);
}
var par = Div[0].parentNode;
par.removeChild(Div[0])
}
定义加载动画css样式
/*
* loading加载动画样式
*/
.ui-loading{
position: fixed;
top:;
right:;
bottom:;
left:;
z-index:;
background-color: rgba(0,0,0,.4);
}
.ui-loading-mask{
width: 6px;
height: 6px;
border-radius: 50%;
-webkit-animation: typing 1s linear infinite alternate;
-moz-animation: Typing 1s linear infinite alternate;
animation: typing 1s linear infinite alternate;
margin: 80% auto 0; /* Not necessary- its only for layouting*/
position: relative;
left: -12px;
}
@-webkit-keyframes typing{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
}@-moz-keyframes typing{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
}@keyframes typing{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.6);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
100%{ background-color: rgba(255,255,255, 0.1);
box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
24px 0px 0px 0px rgba(255,255,255,1);
}
}