本篇制作的效果
我们先看下效果:
前置知识学习
css中的conic-gradient()
在开始讲解如何制作之前, 我们首先需要去了解一个css中的函数, 即conic-gradient().
1. 介绍
引自MDN 介绍
CSS 函数
conic-gradient()创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。锥形渐变的例子包括饼图和色轮。conic-gradient()函数的结果是<gradient>数据类型的对象，此对象是一种特殊的<image>数据类型。
语法介绍:
代码语言：javascript复制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 基本锥形渐变
代码语言：javascript复制<style>
#one {
width: 300px;
height: 300px;
background: conic-gradient(red, yellow, green);
}
</style>
<div id="one"></div>效果:
这会创建一个从红色到黄色再到绿色的圆形渐变，每个颜色之间是平滑过渡的。
2.2 指定角度进行渐变
代码语言：javascript复制<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 指定起始角度的锥形渐变
代码语言：javascript复制<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结构
代码语言：javascript复制 <div class="progress-container">
<!-- 外环指示图形 -->
<div class="progress-circle" style="--progress: 0;"></div>
</div>第二部: 填写CSS样式
代码语言：javascript复制 .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代码
代码语言：javascript复制<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 初始化值
代码语言：javascript复制 const progressCircle = document.querySelector('.progress-circle'); // 外圈
const pro = document.getElementById('progress'); // 进度数值
let progress = 0; // 初始状态 进度数值 为0定义一个定时器,用持续更新状态
代码语言：javascript复制这里需要注意的是, 一个圆圈为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() 函数.
结尾
文章里面如果有某些地方出现了错误,欢迎指出! 谢谢!
