<canvas id="my_canvas" width="250" height="250"></canvas>

//To draw the half circle with canvas
  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;
  var counter = 0;
  var gradient = ctx.createLinearGradient(0, 0, 0, 250);
  gradient.addColorStop("0.0", "white");
  gradient.addColorStop("1.0", "#ae4e86");
  function progressSim() {
    diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
    counter = (al * 0.6).toFixed(0);
    $("#clock_text > span").text(counter);
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 55;
    ctx.strokeStyle = gradient;
    ctx.beginPath();
    ctx.arc(125, 130, 80, start, diff / 10 + start, false);
    ctx.stroke();
    if (al >= 50) {
      clearTimeout(sim);
      // Add scripting here that will run when progress completes
    }
    al++;
  }
  var sim = setInterval(progressSim, 30);
});