Круговой процентный прогресс бар для нескольких айтемов

Question

Я только изучаю JS, сделал прогресс бар для 1 айтема, как мне отредактировать код, чтобы я смог использовать его для 2,3 и тд айтемов?

circle = document.querySelector('.progress-ring__circle');
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(70);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="statistics__content">
    <div class="statistic__item">
        <svg class="progress-ring">
            <circle class="progress-ring__circle" stroke="#00CCFF" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
            <circle class="progress-ring__circle-full" stroke="rgba(255,255,255, .1)" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
        </svg>
        <h5 class="statistic__item__title">Качество обслуживания</h5>
    </div>

    <div class="statistic__item">
        <svg class="progress-ring">
            <circle class="progress-ring__circle" stroke="#00CCFF" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
            <circle class="progress-ring__circle-full" stroke="rgba(255,255,255, .1)" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
        </svg>
        <h5 class="statistic__item__title">Качество обслуживания</h5>
    </div>

</div>

Answer 1

Не совсем мне понятен вид вашего прогресс бара, но в код отображения прогресса не менял. Добавил ваш persent в атрибут data-progress и поместил все в цикл:

circles = document.querySelectorAll('.progress-ring__circle');


circles.forEach( circle => {
  const radius = circle.r.baseVal.value;
  const circumference = 2 * Math.PI * radius;
  circle.style.strokeDasharray = `${circumference} ${circumference}`;
  circle.style.strokeDashoffset = circumference;
  setProgress(circumference , circle);
  
})


function setProgress(circumference , circle) {
    const offset = circumference - circle.getAttribute('data-progress') / 100 * circumference;
    circle.style.strokeDashoffset = offset;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="statistics__content">
    <div class="statistic__item">
        <svg class="progress-ring">
            <circle data-progress='70' class="progress-ring__circle" stroke="#00CCFF" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
            <circle class="progress-ring__circle-full" stroke="rgba(255,255,255, .1)" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
        </svg>
        <h5 class="statistic__item__title">Качество обслуживания</h5>
    </div>

    <div class="statistic__item">
        <svg class="progress-ring">
            <circle data-progress='50' class="progress-ring__circle" stroke="#00CCFF" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
            <circle class="progress-ring__circle-full" stroke="rgba(255,255,255, .1)" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
        </svg>
        <h5 class="statistic__item__title">Качество обслуживания</h5>
    </div>
    <div class="statistic__item">
        <svg class="progress-ring">
            <circle data-progress='30' class="progress-ring__circle" stroke="#00CCFF" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
            <circle class="progress-ring__circle-full" stroke="rgba(255,255,255, .1)" stroke-width="4" cx="96" cy="96" r="88" fill="transparent"/>
        </svg>
        <h5 class="statistic__item__title">Качество обслуживания</h5>
    </div>

</div>

БЛОГ НА HUSL

Круговой процентный прогресс бар для нескольких айтемов

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