Long Task Estimate
A bar for work measured in minutes, with the time-remaining wording softening as it runs out.
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, useRef, useState } from "react";
import {
AnimatePresence,
animate,
motion,
useMotionValue,
useReducedMotion,
useTransform,About this pattern
Exports, migrations, big imports — the waits long enough that a bar alone becomes an accusation. The fill runs on a decelerating curve rather than a constant rate, and the sentence underneath swaps as it advances: a precise figure early, when a figure helps someone decide whether to stay; softer phrasing late, because counting down the last eleven seconds only makes the wait louder. Both the bar and the wording are derived from a single motion value, so they can never disagree. Each new estimate crossfades in a fixed line box with a few pixels of travel — the panel height is settled from the first frame, and the sentence holds one size throughout.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Archive preparation states the wait in coarse terms and tells you it will notify you.
Related patterns
- Step Progress FillA segmented bar sweeps one stage at a time while each label lifts to full strength as it becomes current.
- Determinate Progress RingA ring fills from empty to full while the percentage counts up inside it.
- Background Refresh HintA two-pixel tinted band travels the panel's top edge while data refetches, without interrupting reading.