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

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #121212;
}

.progress-container {
  height: 0.8rem;
  width: 32rem;
  border-radius: 0.4rem;

  background: #000;
}

.progress-container .progress {
  height: 100%;
  width: 0;
  border-radius: 0.4rem;

  background: #ff4754;

  transition: width 0.4s ease;
}

const progressbar = document.querySelector(".progress");

const changeProgress = (progress) => {
  progressbar.style.width = `${progress}%`;
};

/* change progress after 1 second (only for showcase) */
setTimeout(() => changeProgress(22), 1000);
setTimeout(() => changeProgress(45), 2000);
setTimeout(() => changeProgress(85), 4600);
setTimeout(() => changeProgress(98), 5266);
setTimeout(() => changeProgress(100), 8000);