常用的网页加载进度条

常用的网页加载进度条的写法

• 定时器
• 通过网页加载状态改变进度条
• CSS3进度条小动画
• 定位在头部的进度条
• 实时获取加载数据的进度条

---

定时器

html代码，例如：

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

css代码，先给页面设置一个遮罩层，可以放个加载提示的图片，例如：

 .loading{position: fixed;width: 100%;height: 100%;background-color: #fff;left:0;top:0;z-index: 100}.pic{width: 64px;height: 64px;position: absolute;top:0;left:0;bottom: 0;right: 0;margin: auto;background: url(35.gif);}

JS代码，设置一个定时器3秒后隐藏loading层，例如：

 $(function(){          setInterval(function(){            $('.loading').fadeOut();          },3000)       })

通过网页加载状态改变进度条

document.onreadystatechange页面加载状态改变时的事件，
document.readyState返回当前文档的状态,
uninitialized-还未开始载入
loading-载入中
interactive-已加载，文档与用户可以开始交互
complete-载入完成。
所以我们拿complete状态来判断网页加载状态。
html代码和定时器的一样
JS代码，如下：

 document.onreadystatechange = function(){    if(document.readyState == 'complete'){        $('.loading').fadeOut();    }}

CSS3进度条小动画

html代码，例如：

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

css3样式代码，如下：

.pic i{display: block;float: left;width: 5px;height: 50px;background: #4f0;margin:0 2px;transform:scaleY(0.4);-webkit-transform:scaleY(0.4);-webkit-animation:load 1.2s infinite;animation:load 1.2s infinite;}.pic i:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}.pic i:nth-child(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.pic i:nth-child(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}.pic i:nth-child(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@keyframes load{        0%,40%,100%{transform:scaleY(0.4)}        20%{transform:scaleY(1);}    }@-webkit-keyframes load{        0%,40%,100%{-webkit-transform:scaleY(0.4)}        20%{-webkit-transform:scaleY(1);}    }

js代码也可用 通过网页加载状态改变进度条的写法；

定位在头部的进度条

像大多数网页一样，在加载页面的时候顶部有一条进度条从左往右加载；动态改变进度条的宽度，在最后数据加载完隐藏loading层。
html代码,例如：

 <div class="loading">  <div class="pic"></div></div><header>    <img src="55061.jpg" alt="">    <img src="8602627166.jpg" alt=""></header><script>     $('.pic').animate({width:"20%"},100)</script><section>    <img src="55061.jpg" alt="">    <img src="8602627166.jpg" alt=""></section><script>    $('.pic').animate({width:"50%"},100)</script><footer>    <img src="5061.jpg" alt="">    <img src="08602627166.jpg" alt=""></footer><script>    $('.pic').animate({width:"100%"},100,function(){        $('.loading').fadeOut();})</script>

css样式代码，如下：

 .pic{width:0%;height:3px;background:#f00;position:absolute;top:0;left:0;}

实时获取加载数据的进度条

html代码，例如：

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

css样式，如下：

.pic{width: 100px;height: 100px;position: absolute;top:0;left:0;right: 0;bottom: 0;margin: auto;font-size: 24px;text-align: center;line-height:100px;}.pic span{display: block;width: 80px;height: 80px;position: absolute;top:10px;left:10px;border-radius: 50%;box-shadow: 0 3px 0 #666;-webkit-animation:rotate 1s infinite linear;animation:rotate 1s infinite linear;}@-webkit-keyframes rotate{        0%{-webkit-transform:rotate(0deg);}        100%{-webkit-transform:rotate(360deg);}    }@keyframes rotate{        0%{transform:rotate(0deg);}        100%{transform:rotate(360deg);}    }

JS代码，如下：

 $(function(){        var img = $("img");        var num = 0;        img.each(function(i){            var oImg = new Image();            oImg.onload = function(){                oImg.onload=null;                num++;                $(".loading b").html(parseInt(num/$("img").size()*100)+"%")                console.log(parseInt(num/$("img").size()*100)+"%")                if(num >= i){                    $(".loading").fadeOut();                }            }            oImg.src=img[i].src;        })    })

• 关于 加载动态图 下载 ，参考 这儿,
• 关于 进度条小动画 样式，参考 这儿.

---