zoukankan      html  css  js  c++  java
  • 学习 | 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;也是为了让加载有节奏。

  • 相关阅读:
    hdu 1042 N!
    hdu 1002 A + B Problem II
    c++大数模板
    hdu 1004 Let the Balloon Rise
    hdu 4027 Can you answer these queries?
    poj 2823 Sliding Window
    hdu 3074 Multiply game
    hdu 1394 Minimum Inversion Number
    hdu 5199 Gunner
    九度oj 1521 二叉树的镜像
  • 原文地址:https://www.cnblogs.com/dirkhe/p/9344719.html
Copyright © 2011-2022 走看看