console
function drawCircle (canvasId,percent,lineWidth,lineColor,step){
var canvas = document.getElementById(canvasId),
ctx = canvas.getContext("2d"),
canvasWidth = canvas.getBoundingClientRect().width * 2,
canvasHeight = canvas.getBoundingClientRect().height * 2,
lineWidth = lineWidth || 6,
raf = null,
radian = Math.PI * 2 * percent;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.transform = 'rotate(-' + 90 + 'deg)';
ctx.lineWidth = lineWidth;
var angleToRadian = function(angle){
return Math.PI / 180 * angle;
}
var _draw = function(radian,lineColor){
ctx.strokeStyle = lineColor;
ctx.beginPath();
ctx.arc(canvasWidth / 2, canvasHeight / 2, canvasWidth / 2 - lineWidth * 2, 0, radian);
ctx.stroke();
};
_draw(Math.PI * 2, '#36271c');
if(radian <= 0) return;
var totalAngle = 360 * percent;
var currentAngle = 0;
var step = step || 1;
var _loop = function(){
if(currentAngle >= totalAngle){
cancelAnimationFrame(raf);
return;
}
currentAngle += step;
_draw(angleToRadian(currentAngle),lineColor);
raf = requestAnimationFrame(_loop);
};
_loop();
}
drawCircle('can', 0.5, 18, '#fdb00f',10);
drawCircle('can2', 0.8, 18, '#56beff',10);
<canvas id="can"></canvas>
<canvas id="can2"></canvas>
canvas{
width: 200px;
height: 200px;
}