Route Progress Top
A top-edge bar advances during navigation and completes with a quick finish.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Route Progress Top
*
* The thin bar along the top edge that covers a navigation. It leaps to
* a visible head start, trickles toward — never to — the end while theAbout this pattern
The bar that covers the gap between a click and the next view. It works because it is honest about what it does not know: a leap to a visible head start, then a long decelerating crawl toward a ceiling it never reaches, because arriving at the end before the data does is a lie the reader will catch. When the view commits, the bar completes in a short beat, waits for that run to land, and only then fades — a bar that disappears before it reaches the end reads as a failure. It scales rather than resizing, so it costs one compositor property no matter how busy the page beneath it is, and the view underneath dims while the next one is on its way.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
A slim accent bar runs along the top edge while the next view is fetched.
Related patterns
- Scroll Progress BarA hairline on the top edge tracks how far through a long article the reader has come.
- Tab Indicator SlideThe active-tab underline travels to the tab you picked instead of blinking out and back.
- Breadcrumb Trail AppendGoing one level deeper slides a new crumb in from the right while the trail behind it recedes.