Progress Bar Complete
The last segment fills, then the completion colour runs left to right across the whole bar.
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 · Progress Bar Complete
*
* The last segment of a checklist lands, and the bar answers as one
* object: a wave of the completion colour runs left to right acrossAbout this pattern
What a segmented bar should do the moment its final piece lands. The last segment fills from its left edge, and then every segment in the bar turns to the completion colour in sequence, each a beat after the one before it. The wave is the argument: a finished checklist is one done thing rather than five separate done things, and colour travelling the full width says so with a direction and an end. A generic highlight sweep would have played identically over a half-empty bar. The count is replaced by a state rather than incremented, and a check strokes itself in beside it once the wave has arrived.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Setup checklist
Segmented account-setup indicator resolving to a single completed state.
Related patterns
- First Time BadgeThe first time an account does something, a small rosette settles beside the row and a marker line follows.
- Challenge CompleteA seal presses onto the finished challenge card and settles a couple of degrees off square.
- Daily Goal MetThe day's tile turns over from its running total to its completed face.