学习 | css3实现进度条加载

时间:2022-11-02 21:43:30

进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验。

进度条的的实现分为3大部分:1、页面布局,2、进度条动效,3、何时进度条增加。

文件目录

学习 | css3实现进度条加载

加载文件顺序
<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是移动端屏幕自适应

实现效果

学习 | css3实现进度条加载

 

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;也是为了让加载有节奏。