Read Bar

Real version: animation-timeline: scroll(root). Zero JavaScript, runs off the main thread.

Pure CSSNavigationPro

Usage

Meant for

NavbarFloating TOCApp Layout

Examples

On a Mobile Nav

The scroll-progress strip under the top bar. The real version is one line — animation-timeline: scroll(root), no JavaScript — and the class switches to it with data-wm-scroll wherever the browser supports it. Here it runs on a timer so it is visible without scrolling.

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.

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.