Radial progress indicator using Canvas API

JavaScript and HTML implementation of radial progress indicator using Canvas API.

by Slava Fomin II

HTML

<canvas id="canvas" width="100" height="100"></canvas>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

#canvas {
  border: 1px dashed #eee;
}

JavaScript

const canvasElement = document.getElementById('canvas');
const context = canvasElement.getContext('2d');

const size = 100;
const center = size / 2;
const radius = size / 2;
const startDegree = -0.5;
const thickness = 5;
const targetProgress = 0.15;

let progress = 0;

window.requestAnimationFrame(render);

function render() {

  const degree = progress * 2 + startDegree;

  context.fillStyle = '#dbddde';
  context.beginPath();
  context.arc(center, center, radius, 0, Math.PI * 2);
  context.fill();
  context.closePath();

  context.fillStyle = '#53b374';
  context.beginPath();
  context.moveTo(center, center);
  context.arc(center, center, radius, Math.PI * startDegree, Math.PI * degree);
  context.lineTo(center, center);
  context.fill();
  context.closePath();

  context.fillStyle = '#ffffff';
  context.beginPath();
  context.arc(center, center, radius - thickness, 0, Math.PI * 2);
  context.fill();
  context.closePath();
  
  window.requestAnimationFrame(render);

}

setInterval(function () {
  progress += 0.01;
  if (progress > 1) {
    progress = 0;
  }
}, 25);