Edit in JSFiddle

document.body.style.setProperty('--scroll-height', document.documentElement.clientHeight);
document.body.style.setProperty('--scrolly', window.scrollY);

window.addEventListener('scroll', (e) => {
  document.body.style.setProperty('--scrolly', window.scrollY);
});

window.addEventListener('resize', (e) => {
  document.body.style.setProperty('--scroll-height', document.documentElement.clientHeight);
  document.body.style.setProperty('--scrolly', window.scrollY);
});

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 6px;
  width: calc(var(--scrolly, 0) / var(--scroll-height, 0) * 100%);
  background: rgba(51, 51, 153, 0.8);
}

p {
  height: 200vh;
}

<div class="page-progress"></div>
<h1>Page title: </h1>
<p>Reading progress bar fill as you scroll down the page.</p>