弧形渐变进度条

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>