网页载入动画 php,网站页面加载动画代码

有时候网站服务器带宽不好或者用户网络不好，网站速度打开就会比较慢，那么用户等待就会比较无聊，下面准备了一个loading页面，可以在网站文件未完全加载完毕之前展示。

HTML部分，放在body标签下面(最好是最靠近body)

正在加载中，请稍后

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

document.body.className += 'loaded';

}

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

}

展示效果如下，中间是一个转圈圈的动画