//HTML

<div id="progress-bar"></div>



//CSS

#progress-bar {
  height: 5px;
  background-color: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}




//JS

const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', function() {
  const scrollTop = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = scrollTop / (documentHeight - windowHeight);
  progressBar.style.width = `${progress * 100}%`;
});