<span id="progress" style="--progress: 0;
  --highlight-color: #99cc00;" role="progressbar" aria-live="polite"></span>

<!-- for the demo only: -->
<p><button style="border: 2px solid red; color: red; font-size: 5vh" id="restart">restart</button></p>
<p>highlight colour: <input id="colorpicker" type="color" value="#99cc00"></p>

#progress {
  display: block;
  width: 50vh;
  height: 50vh;
  border: 2vh solid #dadada;
  border-radius: 50%;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}

#progress::before {
  position: absolute;
  top: -5vh;
  left: -5vh;
  width: 60vh;
  height: 60vh;
  content: "";
  display: block;
  border-radius: 50%;
  background: radial-gradient(transparent 58.75%, var(--highlight-color) 59%);
  mask-image: conic-gradient(white calc(var(--progress) / 100 * 360deg), transparent calc(var(--progress) / 100 * 360deg));
  -webkit-mask-image: conic-gradient(white calc(var(--progress) / 100 * 360deg), transparent calc(var(--progress) / 100 * 360deg));
}

#progress::after {
  color: var(--highlight-color);
  font-family: sans-serif;
  counter-reset: progress var(--progress);
  content: counter(progress) "%";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17vh;
}

// JS needed for progress update only
let timeoutRef;
const randomInt = (min, max) => {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1) + min)
}

const progress = document.getElementById('progress')
const colorpicker = document.getElementById('colorpicker')

const updateProgress = () => {
  clearTimeout(timeoutRef)
  const currentProgress = parseInt(progress.style.getPropertyValue('--progress'), 10)
  const newProgress = Math.min(100, currentProgress + randomInt(1, 5))
  progress.style.setProperty('--progress', newProgress)
  
  if (newProgress < 100) {
    timeoutRef = setTimeout(updateProgress, randomInt(50, 300))
  }
}

timeoutRef = setTimeout(updateProgress, randomInt(50, 300))

restart.addEventListener('click', () => {
  progress.style.setProperty('--progress', 0)
  timeoutRef = setTimeout(updateProgress, randomInt(50, 300))
})

colorpicker.addEventListener('change', function() {
  progress.style.setProperty('--highlight-color', this.value)
})