Не работает функция шкалы загрузки JS

Question

Пытаюсь создать круглый прогресс бар, но почему-то сама функция не хочет работать, не могли бы вы подсказать в чём проблема? Спасибо

const circle = document.querySelector('.progress-ring__circle')
const radius = circle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;
const input = document.querySelector('.percent');

input.addEventListener('input', function() {
  setProgress(input.value);
});

circle.style.strokeDasharray = ` ${circumference} ${circumference} `
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
}

html,
body {
  background-color: #B0E0E6;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
}

.progress-ring__circle {
  -webkit-transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.3s;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Loading</title>
</head>
<link href="main.css" rel="stylesheet" type="text/css">

<body>
  <svg class="progress-ring" width="120" height="120">
    <circle class="progress-ring__circle" stroke="#5F9EA0" stroke-width="4" cx="60" cy="60" r="52" fill="transparent" />
</svg>

  <label>
    <input class="percent" type="range" min="0" max="100" value="20">
</label>
</body>

</html>

БЛОГ НА HUSL

Не работает функция шкалы загрузки JS

Ответы (0 шт):