弧形渐变进度条

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>

Answer 1

http://jsbin.com/qubucufuya/4...

简单写了一下，为了方便，开始的块，我定在了 90度的位置上，还有渐变色的处理也比较简单，只是简单的加色
写这个只是为了表明 CSS是可以做到的，主要是确定位置有点麻烦，但是也是可以能过js算的

更新一下，在90度开始也是可以的，在js里判断一下，把不要显示的块隐藏掉就可以了

http://jsbin.com/qubucufuya/6...

======================================更新
晚上闲来无事，又改了改，加上了 百分比显示，只要更改render(60)函数中的数字，可以自定义百分比
http://jsbin.com/vigoxovofu/2...

Answer 2

楼上答案挺好的，如果是我的话，会用 stylus 来写。中间的不写，画一圈标记吧：

https://codepen.io/meathill/p...

希望对你有所启发