svg圆弧进度条，直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <div class="svg"> <svg width="108px" height="60px"> <path d="M 5 55 A 50 50 0 0 1 105 55" fill="#fff" stroke="#E6E6E6" stroke-width="4"/> <path d="M 5 55 A 50 50 0 0 1 15 25" fill="#fff" stroke="#02CFD7" stroke-width="4"/> </svg> </div> </body> </html>
需要注意的是，当给进度条绑定数据的时候需要用到公式：
SVG半圆弧进度条数据绑定计算公式：（不同实现方式数据不同，请参考以下公式）
x = 45- 40*Math.cos(progerss/100*180*Math.PI/180);
y = 45- 40*Math.sin(progerss/100*180*Math.PI/180);