Scroll Progress

A calmer week, in five steps

The best week is the one you barely have to think about. Appointments land where they fit, the fridge refills itself, and the small admin that usually eats an evening is simply done.

Start with the fixed points: work, sleep, the people you see every week. Everything else bends around them, not the other way round.

Then batch the errands. One trip, one list, one window for deliveries. Fewer context switches means more of the day is actually yours.

Leave one evening empty on purpose. An unplanned night is not a gap in the schedule — it is the point of having one.

Finally, review on Sunday. Ten minutes to look ahead beats an hour of untangling on Wednesday.

Installation

pnpm dlx shadcn@latest add @paneui/scroll-progress

Usage

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

<ScrollProgress />

Examples

Bottom Bar

Use inside a scroll container, pinned to its bottom edge.

Ring Sizes

Use the ring where an edge bar has no room, such as a floating button.

Custom Progress

Use to show progress that isn't scroll, like an upload.

Accessibility

Both variants are a role="progressbar" with aria-valuenow from 0 to 100, kept in step without re-rendering. Name it with label. Under reduced motion the spring follow is off.

Inside a frame

A sticky bar takes no room in the flow: it overlays the content's edge, inset from the frame like the scrollbars, and its ends follow the frame's corners (radius less the inset), so it never runs past a rounded edge.

Reads Smooth Scroll by default. See also Scroll To, Scroll Reveal.

API Reference

ScrollProgress

A bar (default) or ring that fills with scroll progress from the nearest SmoothScroll, or the window outside one. Renders a div; no other props pass through.

variant= "bar": "bar" | "ring"; Indicator shape.
progress: MotionValue<number>; Custom 0–1 source. Defaults to the nearest SmoothScroll (or the window).
spring= true: boolean; Spring-smooth the indicator. Off automatically under reduced motion.
label= "Reading progress": string; Accessible name of the progressbar.
className: string; Merged onto the root.
side= "top": "top" | "bottom"; Bar only. Edge the bar sticks to.
position= "fixed": "fixed" | "sticky" | "absolute"; Bar only. fixed for the page, sticky inside a scroll container, absolute inside a relative box.
thickness= 3: number; Bar height or ring stroke width in px.
inset: number; Bar only. Gap in px from the container's edges. A sticky bar defaults to its scroll area's scrollbar inset (4px) and bends with the frame's rounded corners; other positions default to 0.
size= 44: number; Ring only. Diameter in px.
showValue= false: boolean; Ring only. Show the percentage in the middle.

Prop	Type	Default	Description
variant	"bar" \| "ring"	"bar"	Indicator shape.
progress	MotionValue<number>	—	Custom 0–1 source. Defaults to the nearest SmoothScroll (or the window).
spring	boolean	true	Spring-smooth the indicator. Off automatically under reduced motion.
label	string	"Reading progress"	Accessible name of the progressbar.
className	string	—	Merged onto the root.
side	"top" \| "bottom"	"top"	Bar only. Edge the bar sticks to.
position	"fixed" \| "sticky" \| "absolute"	"fixed"	Bar only. `fixed` for the page, `sticky` inside a scroll container, `absolute` inside a relative box.
thickness	number	3	Bar height or ring stroke width in px.
inset	number	—	Bar only. Gap in px from the container's edges. A `sticky` bar defaults to its scroll area's scrollbar inset (4px) and bends with the frame's rounded corners; other positions default to 0.
size	number	44	Ring only. Diameter in px.
showValue	boolean	false	Ring only. Show the percentage in the middle.

data-variant: bar or ring on the root.

Data attribute	Description
data-variant	`bar` or `ring` on the root.