html  js 全屏加载动画缩略图



/* =================================================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);
      }  
    }  

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注