<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//Declare variables for the angle, increment and percentage
var a = 0, b=5,d;
function draw() {
a = a + b;
if(a==360){a=0;}
c = Math.PI * a / 180;
d = Math.round(100 * a / 360);
context.clearRect(0, 0, 500, 500);
context.beginPath();
context.lineWidth = 25;
context.strokeStyle='#343434';
//Draw a dark static circle
context.arc(200,200,100,0,2*Math.PI,false);
context.stroke();
//Display the percentage
context.beginPath();
context.font = 'bold 30pt Calibri';
context.fillText(d + '%', 180, 210);
context.fillStyle = "blue";
context.fill();
//Draw the dynamic circle
context.beginPath();
context.arc(200,200,100,0,c,false);
//Gradient for the dynamic circle
var grd = context.createRadialGradient(200, 200, 102, 200, 200, 104);
grd.addColorStop(0, 'lightblue');
grd.addColorStop(1, 'blue');
context.strokeStyle = grd;
context.stroke();
}
//Call the function every in 150 milliseconds
window.setInterval(draw, 150);
</script>
Of course, the code can be easily amended to control the animation: for instance, this animation runs for ever; with setTimeout() function, however, the number of times that the animation runs can be easily controlled.