纯css实现圆形progress进度条

纯css实现圆形progress进度条

参考源码-- 角向渐变实现圆弧形进度条
核心就是采用了角向渐变 background: conic-gradient()；
效果如下图

html

<div class="wrap">
    <div class="grad"></div>
    <div class="circle"></div>
</div>

css

.wrap{
    position: relative;
}
.grad {
    position: relative;
    height: 200px;
    width: 200px;
    background-color: red; /* 对于不支持渐变的浏览器 */
    background: conic-gradient(#FFCDB2 0, #FFCDB2 55%, #B5838D 55.2%, #B5838D);/* 写js 进度控制这里 */
    -webkit-mask: radial-gradient(transparent, transparent 80px, #000 80.5px, #000 0);
    border-radius: 50%;
}
.grad::before{
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    border-radius: 50%;
    background: #fff;
}
.circle{
    position: absolute;
    top: 0;
    left: 0;
}
.circle::before,.circle::after{
    content: "";
    position: absolute;
    top: 90px;
    left: 90px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFCDB2;
    z-index: 1;
}
.circle::before{
    transform: translate(0, -90px);
}
.circle::after{
    transform: rotate(198deg) translate(0, -90px);/* 写js要控制这里 100%=360度 得出比例1:3.6 55*3.6=198(度) */ 
}

什么？
居然没有js?
js可根据项目与自己的情况去添加
创作不易，点个赞呗~