Circular progress indicator with a color gradient with SVGs?

Question

I need to make a circular progress indicator with a color gradient. I also need the \'ends\' of the progress circle to be rounded. This image has everything Im trying to ach

Answer 1

Your original code nearly worked. The problem was that the stroke color of the progress circle was being overridden by the stroke: blue; in the CSS. Removing this allows the gradient to apply to the circle's stroke, as desired.

var control = document.getElementById('control');
var progressValue = document.querySelector('.progress__value');

var RADIUS = 54;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;

function progress(value) {
  var progress = value / 100;
  var dashoffset = CIRCUMFERENCE * (1 - progress);

  // console.log('progress:', value + '%', '|', 'offset:', dashoffset)

  progressValue.style.strokeDashoffset = dashoffset;
}

control.addEventListener('input', function(event) {
  progress(event.target.valueAsNumber);
});

progressValue.style.strokeDasharray = CIRCUMFERENCE;
progress(60);

.demo {
  flex-direction: column;
  display: flex;
  width: 120px;
}

.progress {
  transform: rotate(-90deg);
}

.progress__meter,
.progress__value {
  fill: none;
}

.progress__meter {
  stroke: grey;
}

.progress__value {
  /* stroke: blue; */
  stroke-linecap: round;
}