motion-progress

Fixed scroll-progress bar driven by Motion One's scroll(). Spring-eased scaleX, so the bar settles past its target instead of hard-snapping.

Preview

The bar pinned to the top of every docs page is a live motion-progress tracking your scroll. The mock below shows what the markup represents.

Import

Usage

Per-element progress

Pass a CSS selector to target to track scroll progress through a specific element rather than the whole document. Useful for long-form articles, sticky sections, or per-card readers.

Properties

Attribute	Property	Type	Default	Description
position	position	"top" \| "bottom"	"top"	Edge of the viewport the bar pins to
color	color	string	var(--color-accent, #2563eb)	Bar color (any valid CSS color)
thickness	thickness	number	3	Bar thickness in pixels
target	target	string	—	CSS selector of the scroll target. Defaults to the document
bounce	bounce	number	0.15	Spring bounciness applied to the scaleX response
duration	duration	number	0.4	Spring duration of the scaleX response, in seconds

JavaScript API

Control the progress indicator programmatically with play(), pause(), finish(), and cancel(). The instance below pins an amber bar to the bottom edge of the viewport (the top bar is this page's own progress).

Look at the bottom of the viewport — scroll while playing to see the bar track, then try the transport controls.

playState: –

Accessibility

The bar is rendered with role="progressbar". It does not steal focus or pointer events. Spring overshoot is deliberately small; if you need a perfectly linear bar, set bounce="0".