纯CSS实现圆环进度条

• 个人记录作用

1. 原理就是使用圆锥渐变，加伪元素遮罩。
2. calc(var(--progress, 0) * 1%) 乘以百分之一，就会变成具体的百分数,比如--progress是70，calc(var(--progress, 0) * 1%)的结果就是70%。px同样适用calc(var(--progress, 0) * 1px),结果就是70px

const progress = ref(70)
<div class="progressMain" :style="{ '--progress': progress }">
   <span class="text">{{ progress }}%</span>
</div>

.progressMain {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    // 乘以百分之一，就会变成具体的百分数
    background: conic-gradient(red, calc(var(--progress, 0) * 1%), #111 0);
    position: relative;
    left: 200px;
    // 盖一层白色遮罩
    &::after {
            content: '';
            position: absolute;
            width: 90%;
            height: 90%;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
    }
    // 文案
    .text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: red;
            z-index: 2;
    }
}