<div class="progress"></div>
:root {
  --progress: 0%;
}
.progress {
  position: relative;
  width: 600px;
  height: 20px;
  margin: auto;
  border: none;
  border-radius: 1000px;
  margin: auto;
  background: #9ca3af;
}

.progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: red;
  border-radius: 1000px;
  width: var(--progress);
  transition: all ease 0.5s;
}
let progress = 0;
const progressBar = document.querySelector(".progress");
const style = progressBar.style;

progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

const interval = window.setInterval(() => {
  if (progress >= 100) {
    clearInterval();
    return;
  }
  progress = progress + 10;
  progressBar.setAttribute("aria-valuenow", progress);
  style.setProperty("--progress", progress + "%");
}, 1000);

const clearInterval = () => {
  window.clearInterval(interval);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.