Step Progress Fill
A segmented bar sweeps one stage at a time while each label lifts to full strength as it becomes current.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Step Progress Fill
*
* A segmented bar for work that arrives in named stages. Each segment
* sweeps from its left edge while its stage runs, and its label liftsAbout this pattern
For long work that arrives in named stages — upload, validate, import, verify. Each segment sweeps from its left edge while its stage runs, so the bar reports both how far along the job is and what it is actually doing, which a single undivided bar cannot. Segments also teach the shape of the work: four stages, this is the third, and one of them is always the slow one. The labels carry their state entirely through strength and color; they never resize or move, because a row of stage names doubles as a ruler and a ruler whose marks change size is no longer measuring anything.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Code review
A deployment shows named build stages that light up as each one begins.
Related patterns
- Long Task EstimateA bar for work measured in minutes, with the time-remaining wording softening as it runs out.
- Background Refresh HintA two-pixel tinted band travels the panel's top edge while data refetches, without interrupting reading.
- Cache Hit InstantCached content gets no entrance at all; only the values that actually changed animate.