import { ScrollProgress } from "@/components/godui/scroll-progress";

export function ScrollProgressCircle() {
return <ScrollProgress variant="circle" showAfter={0.05} />;
}

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.

Scroll Progress

tsx

import { ScrollProgress } from "@/components/godui/scroll-progress";// Whole-page reading barexport function ScrollProgressDemo() {return <ScrollProgress />;}

Documentation

Learn Playground

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).

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/lab/scroll-progress.json"

Usage

tsx

import { ScrollProgress } from "@godui/lab";

// Whole-page reading bar
<ScrollProgress />;

// Circular ring that fades in past showAfter and scrolls back to top on click
<ScrollProgress variant="circle" showAfter={0.05} />;

// 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>`	none	Track a scrollable element and pin within it.
`target`	`RefObject<HTMLElement>`	none	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.