Scroll Progress
NavigationNEW
An animated reading progress indicator with spring physics. Renders a top bar or right-side section dots navigator. Scopes to any scroll container via ref.
Loading preview...
Customize
Position:
Thickness3
Color
#6366f1
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top' | 'right' | 'top' | Where to render the indicator — top bar or right-side dots. |
thickness | number | 3 | Height of the top bar in px, or dot diameter base size. |
color | string | '#6366f1' | Fill color for the progress bar and active dot. |
sections | Section[] | [] | Array of { id, label } for right-side section dot navigation. |
containerRef | RefObject<any> | undefined | Scroll container ref. Omit to track window scroll. |
className | string | '' | Additional CSS classes. |