SOURCE

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;
}