Scroll progressPro
A reading progress bar that springs with the page or any scroll container.
Designing with motion
Why motion matters
Motion should explain what changed and where things went. Keep durations short, let springs settle naturally, and never block someone who wants to move fast. Scroll this article and watch the bar fill as you read.
Springs, not curves
Motion should explain what changed and where things went. Keep durations short, let springs settle naturally, and never block someone who wants to move fast. Scroll this article and watch the bar fill as you read.
Respect reduced motion
Motion should explain what changed and where things went. Keep durations short, let springs settle naturally, and never block someone who wants to move fast. Scroll this article and watch the bar fill as you read.
Measure, then animate
Motion should explain what changed and where things went. Keep durations short, let springs settle naturally, and never block someone who wants to move fast. Scroll this article and watch the bar fill as you read.
Ship it
Motion should explain what changed and where things went. Keep durations short, let springs settle naturally, and never block someone who wants to move fast. Scroll this article and watch the bar fill as you read.
When to use
- Long articles, docs and changelogs.
- Scrollable panels where position matters.
When not to use
- Short pages: it adds noise.
Installation
Usage
Import it from @/components/ui/scroll-progress after installing.
import * as React from "react";
import { ScrollProgress } from "@/components/ui/scroll-progress";
// Whole page
<ScrollProgress className="fixed inset-x-0 top-0 z-50" />
// A scrollable panel
const ref = React.useRef<HTMLDivElement>(null);
<ScrollProgress container={ref} showValue />
<div ref={ref} className="h-96 overflow-y-auto">…</div>API reference
ScrollProgress
A bar that scales with scroll position.
| Prop | Type | Default | Description |
|---|---|---|---|
| container | RefObject<HTMLElement> | – | Element to track; omit for the page. |
| showValue | boolean | false | Percentage pill that rides the bar. |
| color | string | var(--brand) | Bar and glow color. |
Accessibility
- Decorative and aria-hidden: scroll position is already conveyed by the scrollbar.
Motion
- Springs toward the scroll position (stiffness 220, damping 32).
Responsive behavior
- Full width of its container; position it fixed for page progress.
Performance
- A single scaleX transform driven by a motion value.
Notes for AI
- For page progress, place it fixed at the top with a high z-index.
This page as Markdown, for assistants and coding agents:
/components/scroll-progress/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt