Как заполнить круглый прогресс бар в соотношении к проценту загрузки?

Cам прогресс сделан через svg. Проблема в том, что нужно распределить голубую линию так, чтобы она была равна заполнению прогресса в процентах, который выступает аргументом в функции setProgress. Мне логичным кажется взять длину окружности круга разделить на 100%. В итоге 3,4 умножить на аргумент функции, выступающий как тот самый процент заполнения. Но по всей видимости логика не верна, и по правде говоря, я понятия не имею, как же тогда решить данное уравнение, чтобы полоса загрузки соответствовала тому самому аргументу, который выступает, как процент.
Подскажите, пожалуйста, как можно решить данную задачу в рамках JS?
https://codepen.io/angelina207/pen/bGLrgbW
  • Вопрос задан
  • 136 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега JavaScript
Нежно люблю верстку
Ответ написан
Комментировать
hahenty
@hahenty
('•')
function setProgress(percent) {
    let count = 0;
    const offsetCount = setInterval(() => {
        circle.style.strokeDasharray = `${count / 100 * circumference} ${circumference}`;

        circlePercent.innerHTML = count + '%';
        if (count >= percent) {
            clearInterval(offsetCount)
        } 
        count += parseInt((percent-count)/5) || 1;
    }, 100)
};
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы