Scroll Progress
A spring-smoothed reading indicator — a pinned top bar or a fading back-to-top ring.
The bar variant pins a progress line to the top of the page and fills as the
reader scrolls. Leave container unset to track the whole page, or pass a ref
to track a scrollable element (as the preview below does).
Scroll this panel
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 1 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 2 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 3 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 4 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 5 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 6 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 7 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 8 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 9 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 10 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 11 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 12 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 13 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 14 of 14.
Circle variant
variant="circle" renders a circular progress ring that fades in past
showAfter and scrolls back to top on click.
Scroll this panel
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 1 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 2 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 3 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 4 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 5 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 6 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 7 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 8 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 9 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 10 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 11 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 12 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 13 of 14.
The progress indicator tracks this scroll container. Keep scrolling to watch it fill — paragraph 14 of 14.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/scroll-progress.json"Usage
import { ScrollProgress } from "@godui/components";
// Whole-page reading bar
<ScrollProgress />;
// Track a specific section
const ref = useRef<HTMLElement>(null);
<ScrollProgress target={ref} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "bar" | "circle" | "bar" | Progress style. |
container | RefObject<HTMLElement> | — | Track a scrollable element and pin within it. |
target | RefObject<HTMLElement> | — | Track a target's progress through the viewport. |
height | number | 3 | Bar thickness in px. |
size | number | 44 | Ring diameter in px. |
showAfter | number | 0.05 | Reveal the ring past this fraction. |
position | "bottom-right" | "bottom-left" | "bottom-right" | Corner the ring docks to. |