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

:root {
  --progress: 0;
}
body {
  background-color: lightgrey;
}
.progress-bar {
    background-color: orange;
    width: 10%;
    position: absolute;
}
.progress-bar-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30px;
  border: 2px solid white;
}

const progress = () => {
  let array = [...Array(100).keys()];
  for (let i of array) {
    document.documentElement.style.setProperty('--progress', i);
  }

}

document.body.addEventListener("click", progress);