<div class="progressbar">
  <div class="progress-fill progress-anim-60s" id="fill">
  </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;
  transform: translateX(-100%);
}

.progress-anim-60s {
  transition: transform 60s linear;
}
.progress-anim-1s {
  transition: transform 1s linear;
}

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

const finishLoading = () => {
  fillElem.classList.remove("progress-anim-60s");
  fillElem.classList.add("progress-anim-1s");
  fillElem.style.transform = "translateX(0px)";
};

setTimeout(() => {
  fillElem.style.transform = "translateX(0%)";
}, 0);

buttonElem.addEventListener("click", finishLoading);