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 |
|---|---|---|---|---|
| | | "top" | "bottom" | "top" | Edge of the viewport the bar pins to |
| | | string | var(--color-accent, #2563eb) | Bar color (any valid CSS color) |
| | | number | 3 | Bar thickness in pixels |
| | | string | — | CSS selector of the scroll target. Defaults to the document |
| | | number | 0.15 | Spring bounciness applied to the scaleX response |
| | | number | 0.4 | Spring duration of the scaleX response, in seconds |
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".