<div class='wrap'>

  <div class='root'>
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <mask id="mask">
          <circle class='circle' cx="50" cy="50" r="45" stroke='white' stroke-width='3' fill='none' />
        </mask>
      </defs>
      <foreignObject x="0" y="0" width="100" height="100" mask="url(#mask)">
        <div class='bg'></div>
      </foreignObject>
    </svg>
    <input id="control" type="range" value="60" />
  </div>

</div>
html, body {
  height: 100vh;
  margin: 0;
}

.wrap {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: #e91e63;
}

.root {
  width: 400px;
  height: 400px;
  text-align: center;
}

svg {

}

.circle {
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: calc((2 * 3.14) * 45);
  stroke-dashoffset: calc((2 * 3.14 * 45) * (1 - calc(var(--progress, 50) / 100)));
  transform-origin: 50% 50%;
  transform: rotate(-87deg);
}

.bg {
  background: conic-gradient(#00bcd4, #ffeb3b 180deg);
  width: 100%;
  height: 100%;
}
View Compiled
const control = document.getElementById('control');
const circle = document.getElementsByClassName('circle')[0];
const bg = document.getElementsByClassName('bg')[0];

control.addEventListener('input', function(event) {
  circle.style.setProperty('--progress', event.target.valueAsNumber);
  const deg = (event.target.valueAsNumber/100) * 360;
  bg.style.setProperty('background', `conic-gradient(#00bcd4, #ffeb3b ${deg}deg)`);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.