Read Bar

animation-timeline: scroll() fills it exactly as far as you have read. Zero JavaScript, runs off the main thread.

Pure CSSNavigationPro

Usage

Meant for

NavbarFloating TOCApp Layout

Examples

On a Mobile Nav

Scroll the release notes — wheel, finger, or focus them and use the arrow keys. The strip under the top bar fills exactly as far as you have read. It is one line of CSS, animation-timeline on a named scroll timeline, with no JavaScript; on the page itself it follows scroll(root) with no attributes at all. Where the browser has no scroll timelines, a scroll listener writes --wm-progress. Until you scroll, the preview runs it on a timer.

Release notes

Motion is a layer, not a library: one class on a component you already have.

Every effect reads the same knobs, so you retune it from your own stylesheet.

Under reduced motion each one rests in a state that still reads correctly.

Motion is a layer, not a library: one class on a component you already have.

Every effect reads the same knobs, so you retune it from your own stylesheet.

Under reduced motion each one rests in a state that still reads correctly.

Motion is a layer, not a library: one class on a component you already have.

Every effect reads the same knobs, so you retune it from your own stylesheet.

Under reduced motion each one rests in a state that still reads correctly.

The class is wm wm-read-bar — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.