So I have a settimeout() function which changes background images of page every two seconds, and I need to have a progress bar at the bottom of the page, which gets from 0% to 100% width and back everytime as image changing function happens.

Image changing function:

function changeImage(){
    
        setTimeout((function(images)
    {
        let index = -1, changeImage;
        changeImage = function()
        {
            index = (index + 1) % images.length;
            hero.style.backgroundImage = 'url(' + images[index] + ')';
        };
        progressBar();
        changeImage();
        return changeImage;
    }([
        'file:///D:/Dev/gym/img/hero.jpg',
        'file:///D:/Dev/gym/img/hero_2.jpg',
    ])), 2000);
    }

Function for progress bar(which I haven't figured out yet):

function progressBar(){

        setTimeout(() => {
            progress.style.width = 100 + '%';
        }, 2000);
    }

What my page looks like:

So there's a bar at the bottom, and it should widen slowly as changeImage function goes off, but I have trouble understanding how I can do it.