【随记 css+js 开发】带进度条和数字的动画加载页开发

最新推荐文章于 2024-09-18 16:43:04 发布

晚秋星辰

最新推荐文章于 2024-09-18 16:43:04 发布

阅读量3.2k

点赞数 3

分类专栏： web前端 javascript 文章标签： css javascript 带数字进度条 setInterva 旋转动画

本文链接：https://blog.csdn.net/dengpeng0419/article/details/53427186

版权

web前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

为了提升用户体验，在程序执行复杂操作时，往往会加入各种加载动画或者进度条提示用户，如果配上数字，感觉会更好，下面给大家分享两种制作带进度条和数字的加载动画的方法。

先来看看实现效果：

这里写图片描述

方法一：基于旋转的动画生成方法

我们先来看看html代码，可以看到：圆形进度条实际上是由左、右两个半圆构成，而中间的数字实际上是一个盖在进度条上的圆。

<body>
<div class="wrap">
    <div class="circle">
        <div class="percent left"></div>
        <div class="percent right wth0"></div>//右半圆，初始状态wth0设置隐藏
    </div>
    <div class="num"><span>0</span>%</div>
</div>
</body>

然后看看js代码如何实现进度条和数字的改变的：有左、右蓝色的半圆，初始化时，左边的半圆被灰色的半圆遮住，右边的半圆不显示，程序开始运行时，左边的蓝色半圆L顺时针旋转（每隔400ms旋转5%*360度），L一点一点露出来，当L半圆完全露出（进度为50%）时，程序控制将右边的蓝色半圆R显示出来，此时，左右两个蓝色半圆重合，接下来，L半圆继续旋转，直到100%。该过程中，进度条的变化时匀速的，数字也每隔400ms加5，当然也可以在此基础上，改变迅速的状态，先快后慢更加逼真。

<script>
    var percent=0;
    var loading=setInterval(function(){//setInterval函数每隔400ms执行一次function（）
        if(percent>100){
            percent=100;
            $('.circle').removeClass('clip-auto');
            $('.right').addClass('wth0');
        }else if(percent>50){
            $('.circle').addClass('clip-auto');
            $('.right').removeClass('wth0');//使右半圆显示
        }
        $('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");//控制旋转
        percent=percent+5;
        if(percent>100) percent=100;
        $('.num>span').text(percent);
        if(percent>100) clearInterval(loading);//停止执行setInterval函数
    },400);

</script>

css代码有点长也容易看清楚，就不贴在这里了，直接附上源码（下载链接）。

方法二：基于svg的动画生成方法

首先还是看看HTML代码，可以看到：后面的进度条的旋转是由一个svg构成的，该svg的参数说明可以参见博客，实际是一个角度可以自定义的饼图，饼图的角度从0变到360°，就构成圆形进度条，而中间的数字实际上是一个盖在进度条上的圆。

<body>
    <div class="place pie">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
            <circle r="16" cx="16" cy="16" stroke="blue" stroke-width="32" stroke-dasharray="0 100" fill="#ccc"/>
        </svg>
    </div>
    <div class="percent"><span>0</span>%</div>
</body>

基于svg的动画生成方法，css代码和js代码都相对比较简单，进度条的变化不是由js程序控制，而是由代码中的grow动画实现，具体说明详见博客。

<style>
    body{
        background: #eee;
    }
    svg {
        border-radius: 50%;
        width: 200px;
        height: 200px;
    }

    circle {
        fill: #ccc;
        stroke: blue;
        stroke-width: 32;
        animation: grow 8s forwards linear;
    }

    .place {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        transform: rotate(-90deg);
    }

    .percent {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 160px;
        height: 160px;
        margin-top: -80px;
        margin-left: -80px;
        background-color: #fff;
        border-radius: 50%;
        line-height: 160px;
        text-align: center;
        font-size: 40px;
    }
    @keyframes grow {
        to {
            stroke-dasharray: 101 100
        }
    }
    </style>

最后是js代码，基于svg的动画生成方法，其js主要控制进度数字的变化，函数setInterval（）运行的时间要和css代码中的动画运行时间一致，这里附上源码（下载链接）。

<script>
var percent = 0;
var loading = setInterval(function() {//setInterval函数每隔400ms执行一次function（）
    percent = percent + 5;
    if (percent > 100) {
        percent = 100;
    } 
    $('.percent>span').text(percent);
    if (percent > 100) clearInterval(loading);//停止执行setInterval函数
}, 400);
</script>