Прогрессбар круговой и его заполнение

Question

Всем привет. Есть код. Он заполняет круги прогресса. Такая проблема: мне нужны четыре круга с разной степенью заполнености. Подскажите, пожалуйтса, как это сделать? Не копировать же код для нескольких классов...

const circle = document.querySelector(".progress_ring_circle_1");
const radius = circle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

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

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

setProgress(20);

Answer 1

Как вариант, можно сделать класс, который будет отвечать за это:

function CircleProgressBar(element) {
    this.element = element;
}
CircleProgressBar.prototype.setProgress = function(currentProgress) {
  ///.....
}

А затем юзать вот так:

const progress = new CircleProgressBar(document.querySelector(".progress_ring_circle_1"));
progress.setProgress(20)

БЛОГ НА HUSL

Прогрессбар круговой и его заполнение

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