Spinner to Check
The waiting arc finishes its turn, closes into a full ring, and the confirming stroke lands inside 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, useState } from "react";
import {
AnimatePresence,
motion,
useAnimationControls,
useReducedMotion,
} from "motion/react";
About this pattern
One circle serves both states. While the request is in flight a quarter arc turns on it; when the response lands, the arc completes the rotation it was already in — not cut short — then extends to a closed ring, shifts to the confirm color, and the angled stroke lands inside. Because nothing is swapped out, there is no frame where the badge is empty and no jump between two glyphs with different optical weights. It also stays deliberately flat: no pop, no bounce. A save indicator fires dozens of times an hour, and anything celebratory becomes noise by the twentieth time you see it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
The save indicator cycles while a page is syncing and resolves into a settled state in the same spot.
Related patterns
- Optimistic Row InsertThe new entry lands at half opacity the instant it is asked for, then firms up when the server agrees.
- File Upload ProgressA file row's bar fills as bytes land while the percentage and the counter roll with it.
- Staggered List EntranceRows fade and lift into place about fifty milliseconds apart, top to bottom.