/* =================================================9.17 */
/* 加载 */
.loading-wrap{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #FFF;
z-index: 9999;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.loading-main{
text-align: center;
width: 100%;
}
.loading-text{
margin: 20px 0;
line-height: 1.8;
}
@-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: #279fcf;
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;
}
//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)
var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,
_LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" class="loading-wrap"><div class="loading-main"><div class="loader-inner line-scale-pulse-out-rapid"><div></div><div></div><div></div><div></div><div></div></div><div class="loading-text">玩命加载中...<br>与此同时可以关注我们的公众号</div><div class="loading-wx"><img src="images/wx.jpg"alt=""></div></div></div>';
//呈现loading效果
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
$("#loadingDiv").fadeOut(1500);
}
}