实现圆环形进度条的效果

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」

前言

大年三十大家都玩开心了吗？没有爆竹声总觉得和平时区别不大。但是玩归玩，学习不能停。今天看到了一个不用JavaScript代码就可以实现彩色渐变圆环进度条，觉得很不错，在这跟大家分享一下~

彩色渐变圆环进度条

不用任何JavaScript代码该怎么实现一个彩色渐变圆环进度条的效果呢？想要用传统的CSS属性去实现可是相当考验CSS功力的。但是今天看到的这个很巧妙，借助SVG描边特性，配合着css的stroke-dashoffset属性，实现起来难度大幅降低。

原理

原理很简单，就是设置两个SVG circle元素，分别做上下层，下层的元素用灰色进行描边，做那个进度槽；上层元素设置为虚线描边，同时用渐变进行描边填充。然后通过改变 stroke-dashoffset 的属性值就可以让渐变描边一点点地出现，相关的代码如下：

<svg width="440" height="440" viewBox="0 0 440 440">
    <circle cx="220" cy="220" r="170"></circle>
    <circle cx="220" cy="220" r="170" transform="rotate(-90 220 220)" class="circle-bar"></circle>
    <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0%</text>
</svg>
circle{
    stroke-width:50px;
    fill:none;
    stroke-dashoarray:1069px;
    stroke:#f0f1f5;
}
/*渐变进度条*/
.circle-bar{
    stroke-dashoffset:1069px;/*值逐渐变小进度条就会慢慢出现*/
    stroke: url(#gradient);
}

其中由于圆形描边是从三点钟开始，所以第二个circle元素设置了 transform="rotate(-90 220 220)" ，让它逆时针旋转90度描边从圆的顶部开始。

总结

大家可以去体验一下，效果非常丝滑。只需要改变上层的circle的stroke-dashoffset属性值就可以设置对应的进度条的效果了，就这一行CSS代码就那实现交互效果。