Scroll Progress
Reading progress bar scrubbed to scroll.
Scroll Progress is a hairline that fills as the reader scrolls, either through the whole page or through one article. GSAP ScrollTrigger scrubs it with a little smoothing.
Preview
Paragraph 1. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Paragraph 2. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Paragraph 3. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Paragraph 4. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Paragraph 5. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Paragraph 6. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Paragraph 7. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Paragraph 8. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single article instead.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/scroll-progress.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/scroll-progress.
Builds on: motion
Usage
import { ScrollProgress } from "@/components/ui/scroll-progress";
<ScrollProgress />Motion
ScrollTrigger scrub with 0.3s smoothing (instant with motion off).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
ScrollProgress
| Prop | Type | Default | Description |
|---|---|---|---|
| target | string | Element | — | Track an element instead of the page. |
| position | "fixed" | "static" | "fixed" | Fixed to the top or inline. |
| scroller | string | Element | — | The scrolling element when it is not the page. |
Accessibility
- Decorative (role=presentation); it adds no announcements.
FAQ
Also searched as: reading progress bar · scroll progress indicator · gsap scrolltrigger progress · react scroll indicator