网页加载进度条

网页加载进度条

一、通过加载状态时间制作进度条

document.onreadystatechange  //页面加载状态改变时的事件
document.readyState //返回当前文档状态

向服务器发送请求的状态：

　 1. uninitialized - 还未开始载入

     2. loading - 载入中

　 3.  interactive - 已加载，文芳与用户可以开始交互

     4. complete - 载入完成

下面的例子是我写的一个简单的加载的动画，可以根据自己的需要自行编写

写一段加载动画的样式：

html：

<div id="loading" class="loading">
    <div class="load_begin"></div>
    <div class="load_end"></div>
</div>

css：

/*加载中动画*/
.loading{
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 999;
}

.load_begin{
    width:20px;
    height: 20px;
    border-radius: 20px;

    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background:rgba(0,255,0,.6);

    animation: divRidu 1s ease-in infinite alternate;
}

.load_end{
    width:40px;
    height: 40px;
    border-radius: 40px;

    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background:rgba(255,0,0,.1);

    animation: divRidu 1s ease-in 1s infinite alternate;
}

@keyframes divRidu  {
    from {
        width:20px;
        height: 20px;
        border-radius: 20px;
    }
    to {
        width:40px;
        height: 40px;
        border-radius: 40px;
    }
}

调用该方法，状态为 complete 时 隐藏 加载div

js：

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

　

二、顶部固定的加载进度条

<!--固定在顶部的进度条-->
    <div id="loading-style4" class="loading">
        <div class="style4-pic"></div>
    </div>

    <script>
        $(".style4-pic").animate({"10%"},100);
    </script>


    <section>
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">

        <script>
            $(".style4-pic").animate({"20%"},100);
        </script>

        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">

        <script>
            $(".style4-pic").animate({"40%"},100);
        </script>

        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">

        <script>
            $(".style4-pic").animate({"60%"},100);
        </script>

        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">

        <script>
            $(".style4-pic").animate({"80%"},100);
        </script>

        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">

        <script>
            $(".style4-pic").animate({"100%"},100);
            $("#loading-style4").fadeOut();
        </script>

    </section>

css

/*加载中动画*/
.loading{
    100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 999;
}

.style4-pic{
     0%;
    height: 5px;
    position: absolute;
    top:0;
    left: 0;
    background: red;
}

　　

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

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

//添加图片 加载
<section>
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
        <img src="http://seopic.699pic.com/photo/50063/6498.jpg_wh1200.jpg" alt="">
</section>

<script src="js/jquery-3.2.1.min.js"></script>
<script>

    $(function(){
        var img = $("img");  //获取所以得图片
        var num = 0;
        img.each(function(i){
            var oImg = new Image();

            oImg.onload=function(){
                num ++;

                $("#loading-style3 b").html(parseInt(num/img.length*100)+ '%');

                if(img.length == num + 1) {
                    $("#loading-style3").hide();
                }
            };

            oImg.src = img[i].src;
        })
    })

</script>

 css

/*加载中动画*/
.loading{
    100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 999;
}

.style3-pic{
     100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 20px;
}

.style3-pic span{
    display: block;
     80px;
    height: 80px;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    box-shadow:0 3px 0 #666;

    animation:rotate 1s infinite linear;
}

@keyframes rotate {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}