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

Question

[Лина Литвак]

Cам прогресс сделан через svg. Проблема в том, что нужно распределить голубую линию так, чтобы она была равна заполнению прогресса в процентах, который выступает аргументом в функции setProgress. Мне логичным кажется взять длину окружности круга разделить на 100%. В итоге 3,4 умножить на аргумент функции, выступающий как тот самый процент заполнения. Но по всей видимости логика не верна, и по правде говоря, я понятия не имею, как же тогда решить данное уравнение, чтобы полоса загрузки соответствовала тому самому аргументу, который выступает, как процент.
Подскажите, пожалуйста, как можно решить данную задачу в рамках JS?
https://codepen.io/angelina207/pen/bGLrgbW

Answer 1

[Ankhena]

https://codepen.io/AnnaSummer/pen/abqyWGa

Answer 2

[Сергей Сергей]

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)
};