利用js实现页面等待效果

nimaboke 2015-4-25 261

我们经常会看到许多页面有CSS3的loading效果,一般都是利用ajax的页面加载过渡动画来实现的,其实,光利用js和css也可以实现

首先,我们需要找到合适的CSS3loading效果

这里我就用我另一站的loading来做例子

HTML:
<div id="loading" class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>

CSS:
.spinner {
color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 30px;
position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000
margin: 100px auto;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
}

.spinner > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
::-webkit-scrollbar { width: 8px;}::-webkit-scrollbar-button { width: 8px; height:5px;}::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px #dfdfdf inset; border-radius:10px;}::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; border-radius:10px;}::-webkit-scrollbar-thumb:hover { background:#7d7d7d;}

效果是这样的

QQ截图20150425134348

然后再加入控制div隐藏的js代码
function lick(){
$("#loading").hide();
}
window.setTimeout("lick()",3000);

其中的3000代表loading在页面加载完成后三秒隐藏
最新回复 (0)
    • 屌丝论坛
      2
          
返回