Html 内容 loading部分：
<div id="sys-loading" class=""><div class="spinner">
<div class="loader-inner line-scale-pulse-out-rapid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div></div>
CSS 展示效果：
/* loading */
#sys-loading {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10000000;
background-color: hsla(0,0%,100%,.93);
opacity: 1
} #sys-loading.finished {
opacity: 0
} #sys-loading .spinner {
position: fixed;
top: 50%;
left: 50%;
margin: -30px auto auto -15px;
/*width: 200px;
height: 100px;*/
font-size: 10px
} #sys-loading .spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s
} #sys-loading .spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s
} #sys-loading .spinner .rect4 {
-webkit-animation-delay: -.9s;
animation-delay: -.9s
} #sys-loading .spinner .rect5 {
-webkit-animation-delay: -.8s;
animation-delay: -.8s
} @-webkit-keyframes stretchdelay {
0%,40%,to {
-webkit-transform: scaleY(.6);
transform: scaleY(.6)
} 20% {
-webkit-transform: scaleY(1);
transform: scaleY(1)
}
} @keyframes stretchdelay {
0%,40%,to {
transform: scaleY(.6);
-webkit-transform: scaleY(.6)
} 20% {
transform: scaleY(1);
-webkit-transform: scaleY(1)
}
} @-webkit-keyframes finishanim {
0% {
opacity: 1
} 99% {
opacity: 0
} to {
display: none
}
} /* --------------- loading -1 --------------------- */
@-webkit-keyframes line-scale-pulse-out-rapid {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); } 80% {
-webkit-transform: scaley(0.3);
transform: scaley(0.3); } 90% {
-webkit-transform: scaley(1);
transform: scaley(1); } } @keyframes line-scale-pulse-out-rapid {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); } 80% {
-webkit-transform: scaley(0.3);
transform: scaley(0.3); } 90% {
-webkit-transform: scaley(1);
transform: scaley(1); } } .line-scale-pulse-out-rapid > div {
background-color: #67CF22;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78); }
.line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {
-webkit-animation-delay: 0.25s !important;
animation-delay: 0.25s !important; }
.line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {
-webkit-animation-delay: 0.5s !important;
animation-delay: 0.5s !important; }
延迟间隔 关闭loading
document.onreadystatechange = subSomething;
function subSomething() {
//当页面加载状态
if (document.readyState == "complete") {
//延迟一秒关闭loading
$('#sys-loading').delay(1300).hide(0);
$('.spinner').delay(1300).fadeOut('slow');
}
}