Progress Bar

HTML

<div>Weiterleitung in <span id="remaining"></span> Sekunden.</div>

<div class="container">
  <div id="progress"></div>
</div>

CSS

#progress {
  width: 10%;
  height: 100%;
  background-color: blue;
  color: white;
  text-align: center;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 2rem;
  border: 1px solid black;
  box-shadow: 1px 1px gray;
}

JavaScript

import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

var state = {
  width: 10,
};

animate(state, {
  width: 100,
  duration: 10000,
  ease: "linear",
  onUpdate,
  onComplete,
});

function onUpdate(a) {
  document.getElementById("remaining").textContent = ((a.duration - a.currentTime)/1000).toFixed(1);
  let p = document.getElementById("progress");
  p.style.width = state.width + "%";
  p.textContent = Math.round(state.width) + "%";
}

function onComplete() {
  window.alert("Fertig! 🎉");
}