JSFiddle - React, Tailwind, and code Playground

by makaksel

HTML

<div>
    <progress class="progress" value="0" max="300">
        <span class="percent">0</span>%
    </progress>
</div>

<div>
    <progress class="progress" value="0" max="300">
        <span class="percent">0</span>%
    </progress>
</div>

<div>
    <progress class="progress" value="0" max="300">
        <span class="percent">0</span>%
    </progress>
</div>

CSS

::-webkit-progress-bar {
    background: #000;
}
::-webkit-progress-value {
    background: #FAD4E7;
}
::-moz-progress-bar {
    background: #FAD4E7;
}
progress {
    display: block;
    color: red;
    border-radius: 5px;
    box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    width: 500px;
    height: 5px;
    margin-top: 15px;
    line-height: 21px;
    font-size: 15px;
    font-family: sans-serif;
    text-align: center;
}

JavaScript

let progress = document.querySelectorAll('.progress');
    let counter = 0

    function changeProgress() {
        let bar = progress[counter]
        if (bar) {
            let percent = bar.querySelector('.percent');
            if (!bar.value) bar.value = +bar.getAttribute("value");
            if (!bar.max) bar.max = +bar.getAttribute("max");

            if (bar.value == bar.max) {
                counter++
            }

            bar.value++
            percent.innerHTML = Math.floor(bar.value / bar.max * 100);

            setTimeout(changeProgress, 10);

        }
    }

    changeProgress();