Indeterminate Bar
A slim segment crosses the top edge on a loop for work whose length nobody can predict.
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 type { ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Indeterminate Bar
*
* The honest loader for work whose length nobody knows. A slim segment
* crosses the top edge on a loop, accelerating out of the left andAbout this pattern
The loader you reach for when there is no percentage to report and inventing one would be a lie. A short segment travels the track, leaving the left quickly and easing into the right, with a fainter second segment offset behind it so the track is rarely empty. The track keeps its height whether or not anything is running, so switching the loader on cannot nudge the page. Two rules keep it honest: it never accelerates near the right edge, which would imply a finish line it cannot see, and it stays quiet enough to survive fifty crossings without becoming the most interesting thing on screen.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
A thin strip runs along the very top of the window while the next view is fetched.
Related patterns
- Download Arrow ProgressThe download glyph floods with color from the bottom as the transfer advances.
- Content Placeholder PulsePlaceholder blocks rise and fall together on one slow cadence, so the region reads as dormant rather than busy.
- File Upload ProgressA file row's bar fills as bytes land while the percentage and the counter roll with it.