Browse components
Reading ProgressFree
A drawn-line progress indicator with spring-smoothed scroll tracking and a fading percentage.
Add to your project
Checking access...
Works with your AI tools
Claude*
Codex*
Lovable
Base44
Figma Make
Replit*
Cursor*
v0* Compatible with most projects that use the default React/Next.js framework.
Built With
React
Tailwind CSSFramer MotionProps
| Prop | Type | Description |
|---|---|---|
target | RefObject<HTMLElement | null> | Element ref to track; defaults to the document |
position | 'top' | 'bottom' | 'inline' | Where the bar lives |
thickness | number | Bar height in px |
color | string | CSS color for the filled track |
showPercentage | boolean | Fade in a tiny % label while scrolling |
progress | number | Controlled 0–1 value — skips scroll tracking when set |
className | string | Styles for the outer shell |
More Content Components
Minimal accordion with a subtly animated chevron for compact FAQs and supporting details.
A circular scroll progress indicator that doubles as a compact return-to-top control.
The quietest interfaces often carry the most conviction.
Elena Voss
Design Director, Lattice
Editorial pull quote with oversized glyph, expanding rule, and blurred fade-in.