从‘相信前端能做一切’到‘连这个都做不了么’
分享一篇CSS圆环进度条的实践。
正文
此篇文章主要是为了实现仪表盘功能，前后过了4种方案，每篇方案从逻辑、代码、效果、问题四个方面出发。最后个人总结。同时非常非常希望有大佬能够提供一个方案，个人实在想不到实现方案了
需求
h5页面中，做一个环形仪表盘（如下图），需要一个从0%到实际百分比的增长过渡动效
前提
使用前端原生Html、css、js语言实现, 不打算借助第三方插件。
最初Scheme
将UI图片作为背景，上面放一个白色div作为遮罩，再利用css3将白色div旋转，从而达到过渡效果。
代码如下:
<script> function load() {
setTimeout(() => {
document.querySelectorAll('.light-strip-top')[0].setAttribute('style', "rotate: 180deg")
}, 1000)
} </script> 效果如下:
出现问题：
由于仪表盘整体大于180度，所以白色div，在最开始遮挡全部仪表盘，那么旋转一定角度后一定会覆盖UI图。
进化Scheme
根据上面出现的问题，想到与UI沟通将仪表盘改成180度效果（解决不了问题，就把问题解决掉），该方案由于改变了原型之后会导致UI过于丑，就没有进行深度测试。
超进化Scheme
根据上面两个方案的结合，想到将方案1中的白色div换成一张指针图片，利用css3旋转追针，达到过渡效果，但此方案也是改了UI效果。
代码如下:
<script> function load() {
setTimeout(() => {
document.querySelectorAll('.light-strip-top')[0].setAttribute('style', "rotate: 90deg")
}, 1000)
} </script> 效果如下:
Now:
此时大脑宕机了，在我的前端知识基础上，想不到能够完美实现UI效果的方案了。于是和同事探讨了一下，了解到element-plus中的进度条有类似的效果，于是打算看一下源码，了解到它是svg实现的。发现新大陆又开始尝试svg实现。
究极进化Scheme
利用svg，做一个带白色的背景圆环A，再做一个带有渐变背景色的进度圆环B, 利用进度圆环的偏移值、显示长度、断口长度配合css3过渡实现过渡效果。
代码如下:
0%
<script> function setProgress(percentage) {
const circleProgress = document.querySelector('.circle-progress');
const circleBackground = document.querySelector('.circle-background');
const percentageText = document.getElementById('percentage');
const circumference = 2 * Math.PI * 40; // 圆的周长
const circumNewLength = (percentage / 100) * (circumference - 52);
const dashOffset = 163 - circumNewLength;
// 设置进度圆环的样式
circleBackground.style.strokeDashoffset = dashOffset;
circleBackground.style.strokeDasharray = `${200 - circumNewLength}, ${ 52 + circumNewLength }`
circleProgress.style.strokeDasharray = `${circumNewLength}, ${ circumference - circumNewLength }`
// 更新百分比文本
percentageText.textContent = `${percentage}%`;
}
// 设置初始进度为0%
setProgress(0);
// 模拟过渡效果，从0%到50%
setTimeout(() => {
setProgress(50);
}, 1000); // 过渡时间为1秒，你可以根据需要调整这个值 </script> 效果如下：
问题：
基本实现，但是还有一个问题是，渐变色是两点之间的线性渐变，无法做到圆环的顺时针渐变。
总结
- 单纯前端不是万能的
- 个人认为这个需求还是能够实现的
- 希望有da lao能出个方案
- 加油，继续搞