如何给网站加一个页面加载动画代码-三石论坛GM站

Lv.15

给网站加一个页面加载动画代码详细步骤

有时候网站服务器带宽不好或者用户网络不好，网站速度打开就会比较慢，那么用户等待就会比较无聊，下面准备了一个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标签结束之前

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
}

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

教程

1、本站所有主题由该帖子作者发表，与本论坛立场无关，该帖子作者与本站享有帖子相关版权；

2、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和的同意；

3、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意；