原生实现环形进度条

心安事随

发布于 2024-07-29 18:25:49

820

发布于 2024-07-29 18:25:49

文章被收录于专栏：前端大合集

本篇制作的效果

我们先看下效果:

前置知识学习

css中的conic-gradient()

在开始讲解如何制作之前, 我们首先需要去了解一个css中的函数, 即conic-gradient().

1. 介绍

引自MDN 介绍

CSS 函数 conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。锥形渐变的例子包括饼图和色轮。conic-gradient() 函数的结果是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。

语法介绍:

background: conic-gradient([from angle] [at position], color-stop1, color-stop2, ...);

参数说明:

from angle（可选）：定义渐变的起始角度。默认值为 0deg，即从圆的顶部开始。
at position（可选）：定义渐变的中心点。默认值为 center，即元素的中心。可以使用任何有效的 CSS 定位值（例如 top left，50% 50%）。
color-stop：定义颜色和位置。每个颜色停靠点由一个颜色值和一个位置值（可以是角度或百分比）组成。颜色停靠点之间的渐变会平滑过渡。

2. 案例学习

案例展示:

2.1 基本锥形渐变

<style>
#one {
            width: 300px;
            height: 300px;
            background: conic-gradient(red, yellow, green);
     }
</style>        
<div id="one"></div>

效果:

这会创建一个从红色到黄色再到绿色的圆形渐变，每个颜色之间是平滑过渡的。

2.2 指定角度进行渐变

<style>
   #one {
            width: 300px;
            height: 300px;
            background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg);
        }

</style>

<div id="one"></div>

效果:

red 0deg 90deg：指定从0度开始为红色，并在90度时过渡到下一个颜色（蓝色）。 blue 90deg 180deg：指定从90度开始为蓝色，并在180度时过渡到下一个颜色（绿色）。 green 180deg 270deg：指定从180度开始为绿色，并在270度时过渡到下一个颜色（黄色）。 yellow 270deg 360deg：指定从270度开始为黄色，并在360度时回到红色，完成整个圆圈。

2.3 指定起始角度的锥形渐变

<style>
#one{
            width: 300px;
            height: 300px;
            background: conic-gradient(from 45deg, red, yellow, green);
        }
</style>

<div id="one"></div>

效果:

通过使用 from 关键字，你可以调整圆锥渐变的起始角度，这会影响颜色的排列和显示方式。在这个例子中，渐变的开始角度是 45 度，而不是默认的 0 度。

实现环形进度条

通过前面我们对conic-gradient 函数的学习, 可以开展我们下面的正式制作过程了.

第一步: 定义HTML结构

    <div class="progress-container">
        <!-- 外环指示图形 -->
        <div class="progress-circle" style="--progress: 0;"></div>
    </div>

第二部: 填写CSS样式

        .progress-container {
            position: relative;
            width: 120px;
            height: 120px;
        }

        .progress-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: conic-gradient(tomato 0deg, tomato 270deg, lightgray 270deg);
            position: absolute;
            top: 10px;
            left: 10px;
        }

此时

看页面的效果:

但是我们想要的是环形呢, 此时就可以再创建一个小的圆圈,直接重叠在上面.

修改html代码

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;

        }
        .progress-container {
            position: relative;
            width: 120px;
            height: 120px;
        }

        .progress-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: conic-gradient(tomato 0deg, tomato 270deg, lightgray 270deg);
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .inner-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: 20px;
            left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
        }
</style>
    <div class="progress-container">
        <!-- 外环指示图形 -->
        <div class="progress-circle" style="--progress: 0;"></div>
        <!-- 内环中心内容 -->
        <div class="inner-circle"><span id="progress">0</span>%</div>
    </div>

此时页面:

剩下来就需要使用js了

梳理一下思路:

通过js动态控制外边圆圈的锥形渐变的角度值
同步更新里面的数值

来吧,开整.

获取dom + 初始化值

 const progressCircle = document.querySelector('.progress-circle'); // 外圈
 const pro = document.getElementById('progress');  // 进度数值
 let progress = 0; // 初始状态 进度数值 为0

定义一个定时器,用持续更新状态

这里需要注意的是, 一个圆圈为360度,因为我们css属性中的锥形渐变依赖此数值,但是我们希望在进度数值中需要显示的是百分比的形式, 最高为100%,所以这里我们需要进行一个转换.

const interval = setInterval(() => {
            // 计算当前进度百分比
            progress += 1; // 每步增加 1%
            const degrees = progress * 3.6; // 将百分比转换为度数

            // 更新样式属性值
            progressCircle.style.setProperty('--progress', degrees);
            // 更新进度数值显示
            pro.innerHTML = progress;

            if (progress >= 100) { // 当进度达到 100% 时停止
                clearInterval(interval);
                // 归0
                progress = 0;
            }
        }, 100); // 每步100毫秒

其实很简单. 主要还是需要去了解一下CSS中的conic-gradient() 函数.