Download Arrow Progress
The download glyph floods with color from the bottom as the transfer advances.
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
Instead of putting a meter next to the icon, the icon becomes the meter. The glyph is drawn twice — an empty outline and an accent copy stacked exactly on top — and the accent copy is revealed bottom-up by an animated clip-path, so the arrow floods rather than being squashed by a growing box. Nothing in the layout is touched frame to frame. On arrival the tile takes a success wash and the arrow swaps for a tick that draws itself, with at most a single soft pulse; the labels only ever cross-fade, because a control that lives in a toolbar gets watched dozens of times a day and anything springier wears out by the third look.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Media player
The offline-download control on an album fills before settling into a saved state.
Related patterns
- File Upload ProgressA file row's bar fills as bytes land while the percentage and the counter roll with it.
- Indeterminate BarA slim segment crosses the top edge on a loop for work whose length nobody can predict.
- Determinate Progress RingA ring fills from empty to full while the percentage counts up inside it.