纯css轻松实现环形进度条

我们在工作中用到环形进度条的时候，一般都是使用组件库提供的，那么你有没有想过这是怎么实现的呢？

你可能很容易会想到使用canvas的ctx.arc()方法画一个圆弧来实现，并且以上展示的antd和element环形进度条，也是使用的svg实现的。

其实有更简单的办法，今天我们使用纯css实现一个环形进度条，那就是使用css函数conic-gradient()：

❝

CSS 函数 conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。 ——来自MDN

❞

从demo我们可以看到右边所展示的图像是由左边代码中所声明的6种不同颜色和不同角度逆时针旋转组成的，当我设置圆角后，看上去就像一个饼图。

「那么如果我只给两个颜色，会是什么样子呢？」

可以看到，其实这里也是可以直接使用百分比的。

看到这里你或许明白我要做什么了，对，再加一个小一点的元素覆盖上去，环形进度条不就有了吗！

这时候你可能会说，你这都写死的，那我用变量传进来不就行了：

好了，大功告成，是不是很简单！并且这个conic-gradient()浏览器兼容性也不错。

最后奉上全部代码：

<div class="progress" style="--progress: 80%; --last: 20%;" data-progress="80%"></div>

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%;
	}
}