Así que tengo una función settimeout() que cambia las imágenes de fondo de la página cada dos segundos, y necesito tener una barra de progreso en la parte inferior de la página, que va del 0% al 100% de ancho y viceversa cada vez que ocurre la función de cambio de imagen. .

Función de cambio de imagen:

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

Función para la barra de progreso (que aún no he descubierto):

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

Cómo se ve mi página:

Entonces, hay una barra en la parte inferior, y debería ensancharse lentamente a medida que se activa la función changeImage, pero tengo problemas para entender cómo puedo hacerlo.