Scroll Indicator

A progress bar pinned to the top of a scroll area that fills as you read — one CSS animation bound to the container's scroll, no scroll listener.

scroll timelines

PreviewCode

<div class="w-full max-w-md">
  <div class="h-64 overflow-y-auto overscroll-contain rounded-xl border border-border">
    <!-- Progress rail: sticky at the top of the scroll box. Hidden where scroll
         timelines aren't supported, so the fallback is a plain scroll box. -->
    <div
      class="sticky top-0 z-10 hidden h-1.5 w-full bg-muted supports-[animation-timeline:scroll()]:block"
      aria-hidden="true"
    >
      <div
        class="h-full w-0 rounded-r-full bg-primary [animation-name:grow-progress] [animation-duration:auto] [animation-timing-function:linear] [animation-timeline:scroll()]"
      ></div>
    </div>

    <div class="space-y-3 p-5 text-sm/6 text-muted-foreground">
      <h3 class="text-base font-semibold text-foreground">Terms of Service</h3>
      <p>
        By using this service you agree to the terms below. Read them in full — scrolling
        to the bottom is the fastest way to confirm you have seen everything, and the bar
        above tracks exactly how far you have come.
      </p>
      <p>
        <span class="font-medium text-foreground">1. Accounts.</span> You are responsible
        for the activity under your account and for keeping your credentials secret. Tell
        us the moment you suspect they have leaked so we can lock things down.
      </p>
      <p>
        <span class="font-medium text-foreground">2. Acceptable use.</span> Do not abuse
        the service, probe it for weaknesses without permission, or use it to store
        content you have no right to distribute. We reserve the right to suspend accounts
        that put other people at risk.
      </p>
      <p>
        <span class="font-medium text-foreground">3. Content.</span> You keep ownership of
        everything you upload. You grant us only the narrow licence we need to store,
        back up, and display it back to you — nothing more.
      </p>
      <p>
        <span class="font-medium text-foreground">4. Billing.</span> Paid plans renew
        automatically until you cancel. Cancelling stops the next charge; it does not
        refund the period you are already inside.
      </p>
      <p>
        <span class="font-medium text-foreground">5. Termination.</span> You can close
        your account at any time. We can close it too, with notice, if you break these
        terms in a way that harms other users.
      </p>
      <p>
        <span class="font-medium text-foreground">6. Changes.</span> When these terms
        change in a material way we will tell you before the change takes effect, so you
        always know what you have agreed to.
      </p>
      <p>
        That is the whole agreement. The bar above should now be full — thanks for
        actually reading to the end.
      </p>
    </div>
  </div>
</div>

+ required CSS — this part genuinely can't be expressed as utilities (the page explains why)

/* A scroll-driven animation needs a @keyframes block, and keyframes have no utility
   syntax. The markup references it by name — [animation-name:grow-progress] — and binds
   it to the scroll box's own timeline with [animation-timeline:scroll()]. The animation
   is scrubbed by scroll position, not time, so it never runs on its own. */

@keyframes grow-progress {
  from { width: 0; }
  to   { width: 100%; }
}

A reading-progress bar normally ships as a scroll listener: read scrollTop, divide by scroll height, set a width every frame. It is one animation-timeline declaration now.

How it works

The box is an ordinary scroll container: h-64 overflow-y-auto gives it a fixed height and lets the content scroll. That part works everywhere.
The rail is a sticky top-0 strip that stays pinned to the top edge of the box while the content scrolls under it. Inside it, the fill starts at w-0 and grows rightward.
The fill’s [animation-timeline:scroll()] binds its @keyframes animation to the box’s scroll position instead of a clock — scroll() resolves to the nearest scrolling ancestor, which is the box, not the page. Scrolling top to bottom scrubs it from width: 0 to width: 100%.
The keyframes animate width, not transform: scaleX(): scaling a rounded-r-full fill warps its cap, so the rounded end would change shape as you scroll. width keeps the radius constant, and the layout cost of one thin bar is nothing.
[animation-duration:auto] maps the animation’s length to the scroll range, so the bar reads empty at the top and full at the bottom. It’s a longhand on purpose — Tailwind’s animate-[…] shorthand silently drops the auto keyword.
Because scroll() picks the nearest scroller by context, the same fill becomes a page-level reading indicator with no rule change: move it out of the box and make it fixed at the top of the viewport, and scroll() now resolves to the page.

Accessibility

The rail is aria-hidden="true". It only visualizes scroll position, which the platform already reports through the scrollbar and to assistive tech, so announcing it would add no information a screen-reader user is missing.
Keyboard and pointer scrolling are untouched: the indicator is a passive overlay and never intercepts input.
The global prefers-reduced-motion rule caps animation-duration, which a scroll-timeline animation ignores — its progress comes from scroll position, not time. No per-component override is needed: the bar only ever moves as fast as the user scrolls, so it is not autonomous motion.

The fallback story

animation-timeline: scroll() is not Baseline yet (Chrome and Safari ship it; Firefox still keeps it behind a flag). The rail is hidden and only revealed by supports-[animation-timeline:scroll()]:block, so a browser without the feature never shows an empty or stuck bar — it just gets an ordinary scroll box. The indicator enhances; it never carries.

Why the CSS block

@keyframes has no utility syntax. The markup can name the animation — [animation-name:grow-progress] — but the frames themselves must be written as CSS. The block is that one rule and does nothing else, the same escape hatch Marquee and Carousel use. For a thin scrollbar and fade edges on the scroll box itself, see Scroll Area.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Scroll-driven animations (animation-timeline)Limited availability	115	115	✕	26	The scroll-linked animation never runs; the element stays in its base state and the container still scrolls normally.