Edit in JSFiddle

<canvas id="canvas" width="100" height="100"></canvas>
// find canvas and declare static variables
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 40;

// this function draws the actual circle progress
// progress must be a number between 0 and 1
var drawLoadingCircle = function(progress) {
    var degToRad = function(degrees) {
      return degrees * Math.PI / 180;
    };

    var percentageToEndAngle = function(percentage) {
        return degToRad(360/100*percentage - 90);
    }    
    
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw the light full circle
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.lineWidth = 10;
    context.strokeStyle = '#ddd';
    context.stroke();
    context.closePath();

    // draw the black part-cicle
    context.beginPath();
    context.arc(centerX, centerY, radius, degToRad(-90), percentageToEndAngle(progress * 100), false);
    context.lineWidth = 10;
    context.strokeStyle = '#000';
    context.stroke();
    context.closePath();
    
    // draw the progress as a number in the middle of the circle
    context.font = "20px Arial";
    context.textAlign = 'center';
    context.fillText(Math.round(progress*100), 50, 57);
};



// not needed. 
// you should call the "drawLoadingCircle" function in the progress event handler
var startTimer=function(){var r=0,t=setInterval(function(){r+=.001,drawLoadingCircle(r),r>1&&(clearInterval(t),startTimer())},20)};startTimer();