弧形渐变进度条

Question

如下图，这种随着电压的变化而变化的效果怎么做呢？![图片上传中...]最后用的比较笨的方法解决,两张图片一样大小的叠加上去,代码如下:css:.circleBox {            width: 3.96rem;            position: relative;            left: 50%;            transform: translateX(-50%);            min-height: 3.16rem;         }        .circle {            position: absolute;            left: 0;            top: 0;            width: 100%;            height: 3.16rem;            background: url(../../image/bight1.png) no-repeat;            background-size: cover;         }        .circle.on {            background: url(../../image/bight2.png) no-repeat;            width: 50%;            background-size: cover;         }html:  <div class="circleBox">                        <span class="circle"></span>                         <span class="circle on"></span>                     </div>