console
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var w = canvas.width = "300";
var h = canvas.height = "300";
function drow(per) {
context.clearRect(0, 0, w, h);
if (!per) per = 0;
context.beginPath();
context.lineWidth = 10;
if (per < 1) {
context.arc(150, 150, 50, Math.PI * 1.5, (Math.PI * 2 * per) - (0.5 * Math.PI), false);
} else {
context.arc(150, 150, 50, Math.PI * 0, Math.PI * 2, false);
}
context.font = "blod 15px";
context.fillText( Math.round(per*100) + "%",150,150);
context.textAlign = "center";
context.stroke();
}
function drowAnimat(number,per) {
per = per || 0;
setTimeout(function(){
if(per >= number) return ;
per += 0.01;
drow(per);
if(per < number) drowAnimat(number,per);
},20);
}
drowAnimat(0.9);
<div class="wrap">
<canvas id="canvas"></canvas>
</div>
.wrap{
width:300px;
margin:0 auto;
}