progressbar.html

<div id="progress-bar" style="width: 0%; height:1px; background-color: rgb(89 127 235); position: fixed; top: 0px; transform: scaleY(0.5); transform-origin: top left; z-index: 2000;"></div>

<script id="progressbar" type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
  const bar = document.querySelector("#progress-bar");
  const post = document.querySelector("#quarto-content");
  const html = document.documentElement;

  if (!bar || !post) {
    return;
  }

  function updateProgress() {
    const height = post.scrollHeight + post.offsetTop;
    const scrollable = height - html.clientHeight;
    bar.style.width = (scrollable > 0 ? (html.scrollTop / scrollable) * 100 : 0) + "%";
  }

  updateProgress();
  window.addEventListener("scroll", updateProgress, { passive: true });
  window.addEventListener("resize", updateProgress);
});
</script>