<div class="round-time-bar" style="--duration: 10;">
  <div></div>
</div>

<div class="round-time-bar" style="--duration: 5;">
  <div></div>
</div>

<div class="round-time-bar" data-style="smooth" style="--duration: 5;">
  <div></div>
</div>

<div class="round-time-bar" data-color="blue" style="--duration: 12;">
  <div></div>
</div>

<div class="round-time-bar" data-color="blue" data-style="fixed" style="--duration: 3;">
  <div></div>
</div>

<button id="restart-button">restart timers</button>

.round-time-bar {
  margin: 1rem;
  overflow: hidden;
}
.round-time-bar div {
  height: 5px;
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration))
    forwards;
  transform-origin: left center;
  background: linear-gradient(to bottom, red, #900);
}

.round-time-bar[data-style="smooth"] div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

.round-time-bar[data-style="fixed"] div {
  width: calc(var(--duration) * 5%);
}

.round-time-bar[data-color="blue"] div {
  background: linear-gradient(to bottom, #64b5f6, #1565c0);
}

@keyframes roundtime {
  to {
    /* More performant than `width` */
    transform: scaleX(0);
  }
}

const button = document.querySelector("#restart-button");
const bars = document.querySelectorAll(".round-time-bar");
button.addEventListener("click", () => {
  bars.forEach((bar) => {
    bar.classList.remove("round-time-bar");
    bar.offsetWidth;
    bar.classList.add("round-time-bar");
  });
});