Top Progress

Create a top progress bar for navigation (YouTube style). A 3px accent-colored bar fixed to the very top of the viewport that appears when a navigation or async load starts, races to ~55%, trickles slowly toward ~85% while waiting, jumps to 100% when the load completes, and fades out. Implementation: animate with transform: scaleX(progress), transform-origin: left center (never width). The trickle: an initial fast transition to 0.55 (~450ms with cubic-bezier(0.22, 1, 0.36, 1)), then small random increments every ~500ms approaching but never reaching 0.9; on completion, transition to 1 and fade the bar out 350ms later. If a new navigation starts mid-flight, reset to 0 with no transition, then start again. Wire it to real events: router navigation start/end, or fetch start/resolve. Keep it pointer-events: none, above the page header (high z-index). The bar is feedback, not decoration: never show it when nothing is actually loading. Under prefers-reduced-motion, show a static thin bar that appears and disappears with no motion. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.