scrollsBeginnerscroll

Scroll Progress Rail

A thin progress bar pinned to the top of the viewport that fills as the user scrolls.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a scroll progress rail: a fixed, 3px tall bar pinned to the top of the viewport. As the user scrolls the page, the inner fill grows from 0% to 100% width proportional to scroll progress. Use a 50ms linear transition so it tracks smoothly without jitter. Pure HTML+CSS+JS — no libraries.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/scroll-progress-rail
-->
<div class="rail"><div class="fill"></div></div>
<main>
  <h1>Scroll Progress Rail</h1>
  <p>Scroll the page. The bar at the top fills in proportion to how much of the document is currently above the fold.</p>
  <div class="long"></div>
  <p>You made it to the bottom — the bar is full.</p>
</main>