Reading Progress Bar

<article class="scroll-progress">
  <div class="scroll-progress__bar" aria-hidden="true"></div>
  <span class="scroll-progress__count" aria-hidden="true">0%</span>
  <h2 class="scroll-progress__title">A reading progress bar</h2>
  <p class="scroll-progress__text">Scroll this page and the bar along the top tracks how far you've read. It's driven by Motion's scroll(), which uses the browser's native scroll timeline where it's available, so it never lags behind the scrollbar.</p>
  <p class="scroll-progress__text">The bar animates scaleX only, so it stays on the compositor. The counter in the corner updates from the same scroll progress.</p>
  <p class="scroll-progress__text">Long-form articles, documentation and onboarding flows all benefit from a quiet hint about how much is left.</p>
  <p class="scroll-progress__text">Keep scrolling: the bar should reach the far edge right as you hit the bottom of the page.</p>
  <p class="scroll-progress__text">That's it. Paste it into any page and it follows that page's scroll.</p>
</article>