html5 载入网页 显示,页面加载完之前显示Loading

1.第一种方式

HTML

loading...

CSS

.loader {

position: fixed;

left: 50%;

top: 50%;

margin: -0.2em 0 0 -0.2em;

text-indent: -9999em;

border-top: 0.3em solid rgba(0, 0, 0, 0.1);

border-right: 0.3em solid rgba(0, 0, 0, 0.1);

border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);

border-left: 0.3em solid #555;

-moz-transform: translateZ(0);

-webkit-transform: translateZ(0);

transform: translateZ(0);

-moz-animation: loader 300ms infinite linear;

-webkit-animation: loader 300ms infinite linear;

animation: loader 300ms infinite linear;

-moz-transition: all 500ms ease;

-o-transition: all 500ms ease;

-webkit-transition: all 500ms ease;

transition: all 500ms ease;

}

.loader,

.loader:after {

border-radius: 50%;

width: 2em;

height: 2em;

}

.curtain {

position: fixed;

width: 100%;

height: 100%;

top:;

left:;

background-color: white;

-moz-transition: all 600ms ease;

-o-transition: all 600ms ease;

-webkit-transition: all 600ms ease;

transition: all 600ms ease;

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

opacity:;

z-index:;

overflow: hidden;

}

@-webkit-keyframes loader {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-moz-keyframes loader {

0% {

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-moz-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes loader {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.is-loading {

overflow: hidden;

}

.is-loading .curtain {

filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

opacity:;

z-index:;

}

.is-loading .loader {

filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

opacity:;

}

JS

window.οnlοad=function(){

$('body').removeClass('is-loading');

}

2.第二种方式

HTML

CSS

#loading{

width: 100%;

height: 100%;

background-color: #fff;

position: fixed;

top:;

left:;

z-index:;

}

#loading >i{

width: 64px;

height: 64px;

position: absolute;

top:;

bottom:;

left:;

right:;

margin: auto;