File Upload Progress
A file row's bar fills as bytes land while the percentage and the counter roll with it.
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 {
animate,
motion,
useMotionValue,
useReducedMotion,
useTransform,
} from "motion/react";About this pattern
The honest version of an upload row. A bar fills from the left while the percentage and the megabyte counter climb beside it, and all three are read off a single motion value, so the number can never disagree with the bar it sits above. The fill is a scaleX rather than a width, which keeps it on the compositor instead of relaying out the row on every frame. When the transfer lands, the readout gives way to a tick that draws itself — a stroke arriving in one motion reads as 'it just finished', where a fade reads as 'it was already done'. The filename and both numbers are text, so they cross-fade and never scale.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- File browser
Each file's row carries its own bar, and the row settles once the bar completes.
Related patterns
- Determinate Progress RingA ring fills from empty to full while the percentage counts up inside it.
- Download Arrow ProgressThe download glyph floods with color from the bottom as the transfer advances.
- Spinner to CheckThe waiting arc finishes its turn, closes into a full ring, and the confirming stroke lands inside it.