CSS3实现页面加载进度条
什么情况下会使用到页面加载进度条？
当页面中的需要加载的内容很多，用户直接进入则看不到任何内容，体验不好，这个时候就需要使用到页面加载的一个动画，在页面加载结束后再
显示主体内容。
实现页面加载进度条有哪几种方式？
一般可分为两种，
1.设置多少时间后显示页面，
2.根据页面加载的文档状态来实现
如何根据文档状态来实现？
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档状态
1.uninitialized 还未开始加载
2.loading 载入中
3.interactive 已加载，文档与用户可以开始交互
4.complete 载入完成
<script> document.onreadystatechange = function(){ if (document.readyState === 'complete') { alert('页面加载完成') } } </script>
在页面加载完成后去掉加载动画即可。
加载的小动画如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
.loading{
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 100;
background:#fff;
}
.loading .pic{
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loading .pic i{
display: block;
float: left;
width: 6px;
height: 50px;
background: #399;
margin: 0 2px;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
.loading .pic i:nth-of-type(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}
.loading .pic i:nth-of-type(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.loading .pic i:nth-of-type(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.loading .pic i:nth-of-type(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}
@-webkit-keyframes load {
0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes load {
0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
</style>
</head>
<body>
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</body>
</html>
友情提示：CSS3需要写一些兼容的语法，这里有个网址，直接将CSS代码粘贴过去就可以获得所有兼容的写法 http://autoprefixer.github.io/
