bar.js

import './styles.css';


/**
 * 
 * performance issues
 */

const mountPoint = document.getElementById('root')

const progressBarHandler = function (root) {

    let id = 0
    const usedIds = []
    
    function addProgressBar() {
        id += 1
        root.insertAdjacentHTML('beforeend', `
            <div class="progress-container">
                <div class="progress" id=${id}>
                    &nbsp;
                </div>
            </div> 
        `)
        usedIds.push(id)
        return id
    }

    function addNprogressBars(noOfProgressBars) {
        for(let start = 1; start <= noOfProgressBars; start++) {
            addProgressBar()
        }
    }

    function startProgressBar(barId) {
        document.getElementById(barId).classList.add('progress-fill')
    }

    function startInSerial(no = 1) {
        usedIds.slice(0, no).forEach((id, index) => {
            setTimeout(() => {
                document.getElementById(id).classList.add('progress-fill')
            }, 2000 * index)
        })
    }

    function startInParallel(no = 1) {
        let isAnimationStarted = false;
        requestAnimationFrame(() => {
            if (!isAnimationStarted) {
                usedIds.slice(0, no).forEach((id) => {
                  document.getElementById(id).classList.add('progress-fill')
                })
                isAnimationStarted = true
            }
        })
    }


    return {
        addProgressBar,
        addNprogressBars,
        startProgressBar,
        startInSerial,
        startInParallel
    }

}(mountPoint)


progressBarHandler.addNprogressBars(16)
//progressBarHandler.startInSerial(8)
progressBarHandler.startInParallel(8)