Scroll Progress
Gradient page-progress bar pinned to the top.
- 0.5 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Scroll this box
Paragraph 1. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 2. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 3. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 4. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 5. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 6. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 7. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 8. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 9. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 10. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 11. The bar above fills as you read, easing on a spring so it never jitters.
Paragraph 12. The bar above fills as you read, easing on a spring so it never jitters.
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/scroll-progress.jsonAdds components/velora/scroll-progress.tsx, installs motion and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
className | string | — |
containerTrack this scroll box instead of the window | React.RefObject<HTMLElement | null> | — |
Accessibility
- Reduced motion
- The bar follows the scroll position directly, with no spring easing or overshoot.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative; aria-hidden.