Scroll Progress
A reading-progress bar for the page or any scroll container, animated with scaleX only.
Scroll this article
Paragraph 1. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 2. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 3. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 4. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 5. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 6. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 7. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 8. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Paragraph 9. The bar above is a single element animated with transform: scaleX, updated at most once per frame from a passive scroll listener. Point it at the page (default) or any scroll container with the container prop.
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/scroll-progress.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs scroll-progressUsage
import { ScrollProgress } from "@/components/opus/effects/scroll-progress";
<ScrollProgress /> // page
<ScrollProgress container={ref} /> // a scroll boxAPI
| Prop | Type | Default | Description |
|---|---|---|---|
| container | RefObject<HTMLElement> | — | Scroll container (default: window). |
| color | string | — | Bar background. |
| height | number | 3 | Bar height (px). |
| position | "top" | "bottom" | "top" | Edge. |