Users usually understand concepts better visually so that they are confronted with a multitude of numbers and figures. One of these visual concepts is progress bars. The progress bar we have prepared in this post is circular. This progress bar has a purple color theme. The percentage of progress is written in the center of the progress bar. When the progress bar is loaded, the progress bar is animated from zero to the desired percentage.
HTML
<!-- This script got from www.devanswer.com -->
<canvas id="my_canvas" width="250" height="250" style="border:1px dashed #CCC;"></canvas><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
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 = 20;
ctx.fillStyle = '#9b26b6';
ctx.strokeStyle = "#9b26b6";
ctx.textAlign = 'center';
ctx.fillText(al+'%', cw*.5, ch*.5+2, cw);
ctx.beginPath();
ctx.arc(125, 125, 115, start, diff/10+start, false);
ctx.stroke();
if(al >= 83){
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
}
var sim = setInterval(progressSim, 50);