學習 | css3實現進度條加載

進度條加載是頁面加載時的一種交互效果，這樣做的目的是提高用戶體驗。

進度條的的實現分為3大部分：1、頁面布局，2、進度條動效，3、何時進度條增加。

文件目錄

加載文件順序

<link rel="stylesheet/less" href="./index.less">
<script src="./zepto.min.js"></script>
<script src="./less.js"></script>
<script src="./rem.js"></script>

index.less是樣式文件

zepto是引入的庫

less.js是編譯less的

rem.js是移動端屏幕自適應

實現效果

 

1、頁面布局

頁面布局采用position布局，進度條居中，css采用less，布局風格為移動端，采用rem單位。

html

<section class="loadingBox">
        <div class="progress">
            <div class="run"></div>
        </div>
</section>

less

html,body{
    height: 100%;
}
.loadingBox{
    background: #000000;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: none;
    .progress{
        @w:4.6;
        @h:.3;
        position: absolute;
        width: unit(@w,rem);
        height: unit(@h,rem);
        top: 50%;
        left: 50%;
        margin-left: unit(-@w/2,rem);
        margin-top: unit((-@h/2)+1, rem);
        background: #fff;
        border-radius: unit(@h/2,rem);
        .run{
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: unit(@h, rem);
            // 起始顏色和終點顏色一致就沒漸變效果
            transition: .3s;
            background: -webkit-linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%);
            background: linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%);
            background-size:unit(@h, rem) unit(@h, rem);
            // 從上往下動實現動的效果。
            -webkit-border-radius: unit(@h/2, rem);
            border-radius: unit(@h/2, rem);
            // loadingMove 1s linear infinite both停在最后一幀
            -webkit-animation: loadingMove .8s linear  infinite both;
            animation: loadingMove .8s linear  infinite both;
        }
    }
}
@-webkit-keyframes loadingMove{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 0 -.3rem;
    }
}
@keyframes loadingMove{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 0 -.3rem;
    }
}

 

 那么問題來了進度條有一個向上走的波紋，波紋是如何實現的，波紋是如何動的，這兩個問題的原理是什么

2、進度條動效

波紋是如何實現的

波紋的實現用到的background的 linear-gradient 0-25%是一個顏色，25%-50%是一個顏色，50%-75%是一個顏色，75%-100%是一個顏色，讓其不repeat 默認就是repeat的，完全填充進度條長度與寬度，代碼如下

background: linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%);

波紋是如何動起來的

動起來用到了css中的animation，讓進度條的背景從上往下走，就能實現動的效果，那么如何實現從上往下走呢？答案就是用css3的animation的keyframes，0%是讓其position為0 0  100%的時候讓其position 0 -.3rem 。-.3rem就是進度條的高度，代碼如下，loadingMove是楨函數，.8s是持續時間0.8s，linear是線性變化，infinite是無限重復，both是每一循環停在最后一幀。

animation: loadingMove .8s linear  infinite both;

loadingMove

@keyframes loadingMove{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 0 -.3rem;
    }
}

3、何時進度條增加

眾所周知頁面上耗費最多的時間是圖片，那么可不可以每加載一張圖片，就讓count加1，那么加載n張再除以總的圖片數就是加載進度，加載進度。代碼中的邏輯就是，遍歷每張圖片，等待每張圖片加載完畢，count加1，同時更改進度條寬度，達到一個實時加載的效果。

let loadingRender = (function(){
    let $loadingBox = $(".loadingBox"),
        $run = $loadingBox.find(".run");
    // 計算圖片加載進度
    let imgList =["./1.png","./2.png","./3.png","./4.png"];
    let total = imgList.length,
        cur = 0;
    let computed = function(){
        imgList.forEach(function(item){
            let tempImg =  new Image();
            tempImg.src = item;
            tempImg.onload = function(){
                cur++;
                runFn();
                tempImg = null;
            }
        })
    }
    let runFn = function(){
        $run.css("width",(cur/total)*100+"%");
        if (cur>=total) {
            // 進入的下一個區域的時間節點
            let delay = setTimeout(function(){
                clearTimeout(delay);
            },1500)
        }
    }
    return {
        init:function(){
            $loadingBox.css("display","block");
            computed();
        }
    }
})();
loadingRender.init();

其中runFn是增加寬度的函數，用了了setTimeout，目的是延緩一會加載，讓加載有點節奏，同理，css中transition: .3s;也是為了讓加載有節奏。