SOURCE

window.onload = function(){
        new Progress().renderOne('canvas1',100,5,10);
        new Progress().renderOne('canvas2',100,5,20);
        new Progress().renderOne('canvas3',100,5,30);
        new Progress().renderOne('canvas4',100,5,40);
        new Progress().renderOne('canvas5',100,5,50);
        new Progress().renderOne('canvas6',100,5,60);
        new Progress().renderOne('canvas7',100,5,70);
        new Progress().renderOne('canvas8',100,5,80);
        new Progress().renderOne('canvas9',100,5,90);
        new Progress().renderOne('canvas10',100,5,100);
    }
var Progress = function() {
  var progress = {
    textheight: null,
    renderOne: function(id, length, r, percent) {
      var canvas = document.getElementById(id);
      var context = canvas.getContext("2d");
      canvas.width = length;
      canvas.height = length;
      var i = 0;
      var interval = setInterval(function() {
        i++;
        progress.render(context, length, r, i, percent);
        if (i >= percent) {
          clearInterval(interval)
        }
      },
      10)
    },
    render: function(context, length, r, i, percent) {
      context.clearRect(0, 0, length, length);
      context.beginPath();
      var gradient = context.createLinearGradient(length, 0, 0, 0);
      gradient.addColorStop("0", "#FF0000");
      gradient.addColorStop("1.0", "#FF1200");
      context.strokeStyle = gradient;
      context.lineWidth = r;
      context.arc(length / 2, length / 2, length / 2 - r, -0.5 * Math.PI, -0.5 * Math.PI + i * 0.02 * Math.PI, false);
      context.stroke();
      context.closePath();
      context.beginPath();
      context.strokeStyle = "#FF0000";
      context.lineWidth = 2;
      context.fillStyle = "#FF0000";
      context.arc(length / 2, r, 0.6 * r, 0, 2 * Math.PI, false);
      context.stroke();
      context.fill();
      context.closePath();
      context.beginPath();
      var radian = percent / 100 * 2 * Math.PI - 0.5 * Math.PI;
      var x = Math.cos(radian) * (length / 2 - r) + length / 2;
      var y = Math.sin(radian) * (length / 2 - r) + length / 2;
      context.arc(x, y, 0.6 * r, 0, 2 * Math.PI, false);
      context.stroke();
      context.fill();
      context.closePath();
      context.beginPath();
      context.lineWidth = 1;
      context.strokeStyle = "#FF0000";
      context.fillStyle = "#FF0000";
      context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * Math.PI);
      context.fill();
      context.closePath();
      context.beginPath();
      context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px 微软雅黑";
      context.fillStyle = "#ffffff";
      var text = percent + "%";
      textwidth = context.measureText(text).width;
      if (this.textheight == null) {
        var div = document.createElement("div");
        document.body.appendChild(div);
        div.innerHTML = text;
        div.style.fontSize = ((length / 2 - 2.5 * r) / 2) + "px";
        this.textheight = div.offsetHeight;
        div.parentNode.removeChild(div)
      }
      textheight = this.textheight;
      context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4);
      context.fill();
      context.closePath()
    }
  };
  return progress
};

    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
    <canvas id="canvas3"></canvas>
    <canvas id="canvas4"></canvas>
    <canvas id="canvas5"></canvas>
    <canvas id="canvas6"></canvas>
    <canvas id="canvas7"></canvas>
    <canvas id="canvas8"></canvas>
    <canvas id="canvas9"></canvas>
    <canvas id="canvas10"></canvas>