Route progress

CSS owns the whole choreography; JS only flips data-phase. A 120ms grace delay means instant and prefetched navigations never paint a single frame of bar. Slow ones surge to 80% in 600ms, then crawl linearly toward 94% for up to 18s — it can stall, but it can never freeze.

data-phasegrace 120mssurge 600ms → 80%crawl → 94%snap-finish

Simulate a navigation

watch the very top edge of the viewport

The sidebar links run the same bar on real navigations — client transitions here finish inside the grace window, which is exactly the point.

The bar is chrome, not an instrument — it's allowed to lie politely (94% is not a measurement). That's why the finish SNAPS to 100% and gets out: reporting fake precision with a smooth landing would dress the lie up as data.

Phase timeline

two chained animations + one snap, all declared once

t=0      data-phase="loading"          JS flips ONE attribute
t=0–120  grace: animation-delay holds scaleX(0) — nothing paints
t=120    rp-surge   600ms ease-out-soft → scaleX(.80)
t=720    rp-crawl   18s LINEAR → scaleX(.94)   (chained by delay;
         `forwards` fill so its from-frame can't fire early)
done     data-phase="done" — same two animations listed verbatim
         (no restart) + rp-finish appended: snap to 1, fade, gone.
         finished inside the grace window? JS flips straight to
         "idle" — a nav nobody saw gets no finish flash.