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