给网站加一个页面加载动画代码详细步骤
有时候网站服务器带宽不好或者用户网络不好,网站速度打开就会比较慢,那么用户等待就会比较无聊,下面准备了一个loading页面,可以在网站文件未完全加载完毕之前展示。
HTML部分,放在body标签下面(最好是最靠近body)
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div id="load_title">正在加载中,请稍后</div>
</div>

JS部分,放在body标签结束之前

<script> 

window.onload = function () {
document.body.className += ' loaded';
}
</script>

CSS部分,最好写入到一个单独的css文件,然后在网页的head内引入。

.chromeframe {
margin: .2em 0;
background: #ccc;
color: #000;
padding: .2em 0
}

#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999
}

#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
}

@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
}

#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #1abc9c;/*背景色 原#1abc9c */
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}

#loader-wrapper .loader-section.section-left {
left: 0
}

#loader-wrapper .loader-section.section-right {
right: 0
}

.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);
transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)
}

.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);
transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)
}

.loaded #loader {
opacity: 0;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}

/* 原版load_title是从上面飘出去,感觉太二了注销掉了,结束自动消失 */
.loaded #loader-wrapper {
visibility: hidden;
/*-webkit-transform: translateY(-100%);*/
/*-ms-transform: translateY(-100%);*/
/*transform: translateY(-100%);*/
/*-webkit-transition: all .3s 1s ease-out;*/
/*transition: all .3s 1s ease-out*/
}

.no-js #loader-wrapper {
display: none
}

.no-js h1 {
color: #222
}

#loader-wrapper #load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px
}

#loader-wrapper #load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: .5
}

以上说明的步骤全部部署完成后的效果如图:

1456171654.png

 

本文标题:如何给网站加一个页面加载动画代码
本文链接:https://www.lengxi.net/post/389.html
作者授权:除特别说明外,本文由 冷曦 原创编译并授权 冷曦博客 - 源码之家 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

暂无留言,赶快评论吧

欢迎留言