Sync Status Rotate
A sync glyph turns slowly while changes upload, then stops on a tick.
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 · Sync Status Rotate
*
* The saving indicator in a document header: a two-arc glyph turns
* slowly while changes upload, then stops on a tick as the labelAbout this pattern
The saving indicator that lives in a document header. While changes are in flight a two-arc glyph turns on a linear loop — no easing, because an eased turn implies a progress it does not know. When the upload lands the glyph leaves on a decelerating curve as the tick springs in, so the pair reads as one mark coming to rest rather than two icons swapping. The label crossfades inside a slot sized to its longest state, so the toolbar never shifts while someone is mid-sentence.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Header status swaps between saving and saved without moving the title.
Related patterns
- Save Indicator SettleA turning ring under "Saving" resolves into a drawn tick under "Saved", then the chip recedes.
- Changes Saved PillA pill drifts up from the toolbar to confirm an autosave, then dissolves.
- Connection RestoredThe offline bar turns green, confirms, and retracts in one continuous move.