SOURCE

window.onload = () => {
  const canvas = document.querySelector('#can');
  const cxt = canvas.getContext('2d');

  const cheight = canvas.height = 600;
  const cwidth = canvas.width = 800;

  const rad = 2 * Math.PI / 100;
  let loading = 0;

  const deepBlue = function(n) {
    cxt.save();
    cxt.beginPath();
    cxt.strokeStyle = '#49f';
    cxt.lineWidth = 12;
    cxt.arc(cwidth / 2, cheight / 2, 200, 3 / 2 * Math.PI, 3 / 2 * Math.PI + rad * n);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
  }

  const lightBlue = function() {
    cxt.save();
    cxt.beginPath();
    cxt.strokeStyle = '#A5DEF1';
    cxt.lineWidth = 12;
    cxt.arc(cwidth / 2, cheight / 2, 200, 0, Math.PI * 2);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
  }

  const drawText = function() {
    cxt.save();
    cxt.fillStyle = '#f47c7c';
    cxt.font = '40px Arial';
    cxt.textAlign = 'center';
    cxt.fillText(loading.toFixed(2) + '%', cwidth / 2, cheight / 2);
    cxt.restore();
  }

  const run = function() {
    cxt.clearRect(0, 0, cwidth, cheight);
    loading = loading + 0.02;
    if (loading > 100) {
      loading = 0;
    }
    lightBlue();
    drawText();
    deepBlue(loading);
    requestAnimationFrame(run)
  }

  run();
}

<canvas id="can">
</canvas>

#can {
  border: 1px solid red;
}