什么情况下会使用到页面加载进度条？
当页面中的需要加载的内容很多，用户直接进入则看不到任何内容，体验不好，这个时候就需要使用到页面加载的一个动画，在页面加载结束后再
显示主体内容。
实现页面加载进度条有哪几种方式？
一般可分为两种，
1.设置多少时间后显示页面，
2.根据页面加载的文档状态来实现
如何根据文档状态来实现？
1document.onreadystatechange 页面加载状态改变时的事件 2 3document.readyState 返回当前文档状态 4 51.uninitialized 还未开始加载 6 72.loading 载入中 8 93.interactive 已加载，文档与用户可以开始交互 10 114.complete 载入完成 12 13<script> 14 document.onreadystatechange = function(){ 15 if (document.readyState === 'complete') { 16 alert('页面加载完成') 17 } 18 } 19</script>
在页面加载完成后去掉加载动画即可。
加载的小动画如下：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <title>Title</title> 8 <style> 9 .loading{ 10 position: fixed; 11 width: 100%; 12 height: 100%; 13 top:0; 14 left: 0; 15 z-index: 100; 16 background:#fff; 17 } 18 .loading .pic{ 19 width: 50px; 20 height: 50px; 21 position: absolute; 22 top: 0; 23 bottom: 0; 24 left: 0; 25 right: 0; 26 margin: auto; 27 } 28 .loading .pic i{ 29 display: block; 30 float: left; 31 width: 6px; 32 height: 50px; 33 background: #399; 34 margin: 0 2px; 35 -webkit-transform: scaleY(0.4); 36 -ms-transform: scaleY(0.4); 37 transform: scaleY(0.4); 38 -webkit-animation: load 1.2s infinite; 39 animation: load 1.2s infinite; 40 } 41 .loading .pic i:nth-of-type(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;} 42 .loading .pic i:nth-of-type(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;} 43 .loading .pic i:nth-of-type(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;} 44 .loading .pic i:nth-of-type(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;} 45 @-webkit-keyframes load { 46 0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);} 47 20%{-webkit-transform: scaleY(1);transform: scaleY(1);} 48 } 49 @keyframes load { 50 0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);} 51 20%{-webkit-transform: scaleY(1);transform: scaleY(1);} 52 } 53 54 </style> 55</head> 56<body> 57<div class="loading"> 58 <div class="pic"> 59 <i></i> 60 <i></i> 61 <i></i> 62 <i></i> 63 <i></i> 64 </div> 65</div> 66 67</body> 68</html>
友情提示：CSS3需要写一些兼容的语法，这里有个网址，直接将CSS代码粘贴过去就可以获得所有兼容的写法 http://autoprefixer.github.io/