css 实现圆环进度条

先上图，最后的效果是这样

主要的思路是 使用锥形渐变给div一个背景，然后使用mask遮挡中间部分，这样就变成一个圆环了，最后用 before和after处理一下 圆环进度开始和结束位置。

html

<div class="shadow"></div>

css

.shadow {
	width: 100px;
	height: 100px;
	position: relative;
	border-radius: 50%;
	background: conic-gradient(#ddff5c 0%, #28d4c3 50%, #85ea8e 75%, #1d335c 75%, #1d335c 100%);
	mask: radial-gradient(transparent 44px, #000 45px);
  -webkit-mask: radial-gradient(transparent 44px, #000 45px);
}
.shadow::before {
	content: '';
	position: absolute;
	left: 48px;
	top: 0px;
	width: 5px;
	height: 5px;
	background: #ddff5c;
	border-radius: 50%;
}
.shadow::after {
	content: '';
	position: absolute;
	left: -1px;
	top: 44px;
	width: 8px;
	height: 8px;
	background: #85ea8e;
	border-radius: 50%;
}

@快乐是一切