Scroll Progress

Gradient page-progress bar pinned to the top.

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://velora.colorlib.com/r/scroll-progress.json

Adds components/velora/scroll-progress.tsx, installs motion and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`className`	`string`	`—`
`container` Track this scroll box instead of the window	`React.RefObject<HTMLElement \| null>`	`—`

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.