我们在工作中用到环形进度条的时候,一般都是使用组件库提供的,那么你有没有想过这是怎么实现的呢?
你可能很容易会想到使用canvas
的ctx.arc()
方法画一个圆弧来实现,并且以上展示的**「antd」和 「element」**环形进度条,也是使用的svg
实现的。
其实有更简单的办法,今天我们使用**「纯css」**实现一个环形进度条,那就是使用css函数conic-gradient()
:
❝
CSS 函数
conic-gradient()
创建一个由**「渐变」**组成的图像,渐变的颜色围绕一个中心点旋转(而不是从中心辐射)进行过渡。 ------来自MDN❞
从demo我们可以看到右边所展示的图像是由左边代码中所声明的6种**「不同颜色」和「不同角度」**逆时针旋转组成的,当我设置圆角后,看上去就像一个饼图。
「那么如果我只给两个颜色,会是什么样子呢?」
可以看到,其实这里也是可以直接使用百分比的。
看到这里你或许明白我要做什么了,对,再加一个小一点的元素覆盖上去,环形进度条不就有了吗!
这时候你可能会说,你这都写死的,那我用变量传进来不就行了:
好了,大功告成,是不是很简单!并且这个conic-gradient()
浏览器兼容性也不错。
最后奉上全部代码:
html
<div
class="progress"
style="--progress: 80%; --last: 20%;"
data-progress="80%"
>
</div>
css
body {
padding: 20px;
}
.progress {
width: 200px;
height: 200px;
background: conic-gradient(
green var(--progress),
#f1f1f1 var(--last)
);
border-radius: 50%;
position: relative;
&::before {
content: attr(data-progress);
position: absolute;
inset: 10px;
background-color: #fff;
width: 180px;
height: 180px;
text-align: center;
line-height: 180px;
border-radius: 50%;
}
}