Как сделать уменьшающуюся линию border?

let circle = document.querySelector('circle'); 
let radius = circle.r.baseVal.value; 
let circumference = radius * 2 * Math.PI; 
 
circle.style.strokeDasharray = `${circumference} ${circumference}`; 
circle.style.strokeDashoffset = `${circumference}`; 
 
function setProgress(percent) { 
  const offset = circumference - percent / 100 * circumference; 
  circle.style.strokeDashoffset = offset; 
} 
 
const input = document.querySelector('input'); 
setProgress(input.value); 
 
input.addEventListener('change', function(e) { 
  if (input.value < 101 && input.value > -1) { 
    setProgress(input.value); 
  }   
})

html, 
body { 
  background-color: #2962FF; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  position: relative; 
} 
.progress-ring__circle { 
  transition: 0.35s stroke-dashoffset; 
  -webkit-transform: rotate(-90deg); 
          transform: rotate(-90deg); 
  -webkit-transform-origin: 50% 50%; 
          transform-origin: 50% 50%; 
} 
input { 
  position: fixed; 
  top: 10px; 
  left: 10px; 
  width: 80px; 
}

<svg 
   class="progress-ring" 
   width="120" 
   height="120"> 
  <circle 
    class="progress-ring__circle" 
    stroke="white" 
    stroke-width="4" 
    fill="transparent" 
    r="52" 
    cx="60" 
    cy="60"/> 
</svg> 
 
<input 
  value="35" 
  type="number" 
  step="5" 
  min="0" 
  max="100" 
  placeholder="progress" 
>