我们在工作中用到环形进度条的时候,一般都是使用组件库提供的,那么你有没有想过这是怎么实现的呢?
html
<div
class="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>