andwati.com/apps/site/src/components/ReadingProgress.astro

---
---

<div class="reading-progress-container" aria-hidden="true">
  <div class="reading-progress-bar" id="reading-progress-bar"></div>
</div>

<style>
  .reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1000;
    pointer-events: none;
  }

  .reading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.1s var(--ease-out);
  }
</style>

<script>
  function initReadingProgress(signal: AbortSignal) {
    const bar = document.getElementById("reading-progress-bar");
    if (!(bar instanceof HTMLElement)) return;

    const update = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      const clientHeight = document.documentElement.clientHeight || window.innerHeight;
      const total = scrollHeight - clientHeight;
      bar.style.width = `${total > 0 ? (scrollTop / total) * 100 : 0}%`;
    };

    update();

    let ticking = false;
    window.addEventListener(
      "scroll",
      () => {
        if (ticking) return;
        ticking = true;
        requestAnimationFrame(() => {
          update();
          ticking = false;
        });
      },
      { signal },
    );
  }

  let controller: AbortController | undefined;
  document.addEventListener("astro:page-load", () => {
    controller?.abort();
    controller = new AbortController();
    initReadingProgress(controller.signal);
  });
</script>