<p>same sequence, different duration</p>
<div class="progressbar">
  <div class="progress-fill progress-anim-60s" id="fill">
  </div>
</div>

<p>different sequence, different duration</p>
<div class="progressbar">
  <div class="progress-fill progress-anim-60s" id="fill2">
  </div>
</div>

<br>
<div>
  <button id="cta">speed up</button>
</div>

.progressbar {
  height: 8px;
  width: 300px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 8px;
  background-color: #007bff;
  border-radius: 4px;
  transition: transform 500ms linear;
}

.progress-anim-60s {
  animation: progress-fill-anim 60s;
}
.progress-anim-1s {
  animation: progress-fill-anim 1s;
}
@keyframes progress-fill-anim {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.progress-anim2-1s {
  animation: progress-fill-anim2 1s;
}
@keyframes progress-fill-anim2 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

const fillElem = document.getElementById("fill");
const fillElem2 = document.getElementById("fill2");
const buttonElem = document.getElementById("cta");

const finishLoading = () => {
  fillElem.classList.remove("progress-anim-60s");
  fillElem.classList.add("progress-anim-1s");
  fillElem2.classList.remove("progress-anim-60s");
  fillElem2.classList.add("progress-anim2-1s");
};

buttonElem.addEventListener("click", finishLoading);