[html][javascript] 关于SVG环形进度条

下面是个例子：

<style>
.demo2{
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dasharray .3s ease-in;
}
</style>

<svg  height="150" width="110">
    <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/>
    <circle class="demo2" id="J_demo2" cx="55" cy="55" r="50" fill="none" stroke="red" stroke-width="5" stroke-dasharray="0,10000"/>
</svg>
<input id="J_btn_1" type="text" name="" value="10">
<input id="J_btn_2" type="button" name="" value="set">
<script>
var demo2 =  document.querySelector("#J_demo2");
var btn1 = document.querySelector("#J_btn_1");
var btn2 = document.querySelector("#J_btn_2");

var circleLength = Math.floor(2 * Math.PI * demo2.getAttribute("r"));

window.onload = rotateCircle;

btn2.onclick = rotateCircle;
function rotateCircle () {
    var val = parseFloat(btn1.value).toFixed(2);
    val = Math.max(0,val);
    val = Math.min(100,val);
    demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000");
}
</script>

原文：https://segmentfault.com/a/1190000008149403