学习 CSS 新的属性 conic-gradient 实现环形进度条

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

    <divclass="progress"style="--progress: 80%; --last: 20%"data-progress="80%"></div><style scoped lang="scss">
.progress {display: inline-block;margin: 50px 20px;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%;}
}
</style>