網頁加載進度條

網頁加載進度條

一、通過加載狀態時間制作進度條

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({width:"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({width:"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({width:"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({width:"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({width:"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({width:"100%"},100);
            $("#loading-style4").fadeOut();
        </script>

    </section>

 

css

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

.style4-pic{
    width: 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{
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 999;
}

.style3-pic{
    width: 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;
    width: 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);}
}