网页加载进度条

1、使用定时器来做网页加载定时器（先由一个加载的div覆盖住网页，过几秒钟消失），不切合实际

好用的加载图片，给大家推荐一个网站：https://icons8.com/preloaders/en/free

<style type="text/css">* { margin: 0; padding: 0; }.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }    // 加载的图片盖住页面内容// left: 0; right: 0; top: 0; bottom: 0; margin: auto;可以居中.pic { position: absolute; background: url('./images/1.gif') no-repeat; width: 64px; height: 64px; background-size: 64px 64px; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}</style>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">$(function () {setInterval(function () {$('.loading').fadeOut();        // 过三秒之后，加载的图片消失}, 3000);})		
</script>

<div class="loading"><div class="pic"></div></div>

2、通过加载事件制作进度条

document.onreadystatechange：页面加载状态改变时的事件

document.readyState：返回当前文档的状态包括：

（1）uninitialized：还未开始载入（2）loading：载入中

（3）interactive：已加载，文档与用户可以开始交互 （4）complete：载入完成

<script type="text/javascript">document.onreadystatechange = function () {          // 当文档加载状态改变时if (document.readyState == 'complete') {         // 当文档状态完成时$('.loading').fadeOut();}}	
</script>

3、不使用图片，使用css动画

可以在线生成css动画的网站：https://loading.io/

在线补全css兼容的网站：http://autoprefixer.github.io/

4、定位在头部的加载条：根据文档是从上而下加载的

<style type="text/css">* { margin: 0; padding: 0; }.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }.pic { position: absolute; width: 0; height: 5px; top: 0; background: red;}
</style>

<div class="loading"><div class="pic"></div></div><header></header>
<script type="text/javascript">$('.pic').animate({ width: "30%" }, 100)              // 当加载完头的时候，长度。。。
</script>
<section></section>
<script type="text/javascript">$('.pic').animate({ width: "60%" }, 100)             // 当加载完section时，长度。。。。
</script>
<section></section>
<script type="text/javascript">$('.pic').animate({ width: "90%" }, 100)
</script>
<footer></footer>
<script type="text/javascript">$('.pic').animate({ width: "100%" }, 100, function () {       // 当加载完底部时，长度100%，隐藏$('.loading').fadeOut();})
</script>

5、实时获取加载进度条：根据网页中的图片，当图片都加载完后

实现半圆转动：其实半圆是垂直阴影

<style type="text/css">* { margin: 0; padding: 0; }.loading { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 100; }.pic { position: absolute;width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align:center; line-height: 100px; font-size:25px;}.pic span { position: absolute;top: 10px;left:10px;display: block;width: 80px;height: 80px;border-radius: 50%;box-shadow: 0 3px 0 #ccc; animation: round 1s infinite linear;}@keyframes round { 0% { transform: rotate(0); }  100% { transform: rotate(360deg); }}
</style>

<script type="text/javascript">$(function () {var img = $('img');                // 获取所有图片var num = 0;img.each(function (i) {var oImg = new Image();oImg.src = img[i].src;oImg.onload = function () {   // 当图片加载好后oImg.onload = null;   // 清除重复请求num++;$(".loading b").html(parseInt(num/($('img').length) * 100) + '%');  // 实时百分比if (num >= $('img').length) { $(".loading").fadeOut();}}})});
</script>

<div class="loading"><div class="pic"><span></span><b>0%</b></div>	
</div>

效果：