Circular Progress Loader Canvas JavaScript

Source: https://www.youtube.com/watch?v=isMmrOyz8gM

by katalin_2003

HTML

<canvas id="my_canvas" width="100" height="100" style="border:1px dashed #CCC;"></canvas>

JavaScript

var ctx = document.getElementById('my_canvas').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height; 
var diff;
function progressSim(){
	diff = ((al / 100) * Math.PI*2*10).toFixed(2);
	ctx.clearRect(0, 0, cw, ch);
	ctx.lineWidth = 10;
	ctx.fillStyle = '#09F';
	ctx.strokeStyle = "#09F";
	ctx.textAlign = 'center';
  ctx.font = '2em sans-serif';
	ctx.fillText(al+'%', cw*.5, ch*.5+10, cw);
	ctx.beginPath();
	ctx.arc(50, 50, 45, start, diff/10+start, false);
	ctx.stroke();
	if(al >= 90){
		clearTimeout(sim);
	    // Add scripting here that will run when progress completes
	}
	al++;
}
var sim = setInterval(progressSim, 5);