svg 进度条

circle{

-webkit-transition:stroke-dasharray.25s;

transition:stroke-dasharray.25s;

}

stroke-width: 画图的线条宽度

stroke: 画笔使用的颜色

fill: 填充(半径以内都会被填充) -->

第一个参数: 蓝色的周长;

第二个参数: 余下的周长 -->

transform="matrix(0,-1,1,0,0,440)"stroke-dasharray="0 1069"stroke-linecap="round">

拖我：

if(window.addEventListener){

varrange=document.querySelector("#range");

varcircle=document.querySelectorAll("circle")[1];

if(range&&circle){

range.addEventListener("change",function(){

varcircleR=170;

varpercent=this.value/100,perimeter=Math.PI*2*circleR;

// 现有的蓝色弧长加上灰色弧长

circle.setAttribute('stroke-dasharray',perimeter*percent+""+perimeter*(1-percent));

});

}

}