Back to product momentsMotion Pack 18 · Feedback
Sync recovery
When connectivity returns, connect local edits, syncing progress, and completion through one clear state line.
Sync recovery3 changes waiting to sync
Build sync-recovery feedback: when connectivity returns, move from 3 local edits to Syncing, briefly show a rotating sync icon, then land on All synced. Retain the local-change count and provide a reduced-motion treatment.
State changeText morphLocal edits, Syncing, and All synced update in place.TimingLoopThe sync icon rotates only during the brief recovery window.State changePerceived performanceThe continuously visible local-edit count reduces uncertainty during sync.Reduced motionReduced motionReduced motion keeps sync copy and the completion icon while omitting rotation.
Motion rules
The sync state advances in place to All synced.
Reduced motion
Keep state copy and icon outcome while omitting rotation.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.