<h1 class="text">Animating a progress bar </h1>
<div id="progress">
  <div id="bar"></div>
</div>
<p class="text" id="loading"></p>

.text {
  text-align: center;
}

#progress {
  margin: 20px auto;
  width: 80%;
  height: 40px;
  position: relative;
  background-color: #ddd;
}

#bar {
  background-color: #4267b2;
  width: 10px;
  height: 40px;
  position: absolute;
}

#loading {
  font-size: 1.4rem;
}

const progressBar = document.getElementById("bar");
const loadingMsg = document.getElementById("loading");
let barWidth = 0;

const animate = () => {
  barWidth++;
  progressBar.style.width = `${barWidth}%`;
  setTimeout(() => {
    loadingMsg.innerHTML = `${barWidth}% Completed`;
  }, 10100);
};

// animation starts 2 seconds after page load
setTimeout(() => {
  let intervalID = setInterval(() => {
    if (barWidth === 100) {
      clearInterval(intervalID);
    } else {
      animate();
    }
  }, 100); //this sets the speed of the animation
}, 2000);