component :: Read Progress Bar

HTML

Examples

• Astro Component

  The live demo is the bar at the top of this very page (a fixed element can only be demoed once, so the examples below don’t embed extra instances).

  ---
  import ReadProgressBar from '../components/ReadProgressBar.astro';
  ---
  <ReadProgressBar />

• HTML

  <div class="readProgressBar" aria-hidden="true">
    <div></div>
  </div>

  If you’re using HTML and would like to us the polyfill for browsers that don’t support animation-timeline, add the following JavaScript to your code:

  function throttle(func, delay) {
    let lastCall = 0;
    let timerId;
  
    return function (...args) {
      const now = new Date().getTime();
      if (now - lastCall < delay) {
        clearTimeout(timerId);
        timerId = setTimeout(() => {
          lastCall = now;
          func.apply(this, args);
        }, delay);
      } else {
        lastCall = now;
        func.apply(this, args);
      }
    };
  }
  
  function supportsScrollTimeline() {
    return CSS.supports("animation-timeline: scroll(root y)");
  }
  
  function updateProgressBar() {
    const bar = document.querySelector(".readProgressBar > div");
    if (!bar) return;
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = docHeight > 0 ? scrollTop / docHeight : 0;
    bar.style.width = progress * 100 + "%";
  }
  
  function enableJSProgressBar() {
    const bar = document.querySelector(".readProgressBar > div");
    if (!bar) return;
    // Remove any inline width set by CSS animation
    bar.style.animation = "none";
    bar.style.animationTimeline = "none";
    updateProgressBar();
    const throttledUpdate = throttle(updateProgressBar, 10);
    window.addEventListener("scroll", throttledUpdate, { passive: true });
    window.addEventListener("resize", throttledUpdate);
  }
  
  if (typeof window !== "undefined" && !supportsScrollTimeline()) {
    document.addEventListener("DOMContentLoaded", enableJSProgressBar);
  }