SVG进度条

<svg viewBox="0 0 500 500">
  <circle cx="250" cy="250" r="200" stroke-width="50" stroke="#eee" fill="none" />
  <circle id="circle" cx="250" cy="250" r="200" stroke="url(#grad1)" stroke-width="50" fill="none" stroke-linecap="round" />
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#00F260" />
    <stop offset="100%" stop-color="#0575E6" />
  </linearGradient>
  <text id="text" x="250" y="280" fill="#0575E6">90%</text>
  <circle id="point" cx="250" cy="250" r="200" stroke-dashoffset="1256px" stroke-dasharray="1256px" stroke-linecap="round" stroke-width="40" stroke="#fff" fill="none" />
</svg>
<input id="input" type="number" min="1" max="100" value="90" />

*{margin: 0; padding: 0;}
circle{
  transform-origin: 250px 250px;
  transform: rotate(-90deg);
}
circle#circle{
  /* 周长 1256 */
  stroke-dasharray: 1130.4px 125.6px; 
  transition: stroke-dasharray 0.3s;
}
circle#point{
  transform: rotate(234deg);
  transition: transform 0.3s;
}
text{
  font-size: 100px;
  font-weight: bold;
  text-anchor: middle;
}

let _input = document.getElementById('input');
_input.addEventListener('change', function(e){
  document.getElementById('circle').style.strokeDasharray = 12.56 * e.target.value + 'px ' + 12.56*(100-e.target.value) + 'px';
  document.getElementById('text').textContent = e.target.value + "%";
  document.getElementById('point').style.transform = "rotate(" +  (e.target.value * 3.6 - 90 ) + "deg)";
})