Form submission
Keep the user anchored to the action they just took, then confirm the result without forcing a page-level transition. Avoid: Avoid full-screen loading for small form actions unless the whole page is blocked.
Open Button Loading StateKeep the user anchored to the action they just took, then confirm the result without forcing a page-level transition. Avoid: Avoid full-screen loading for small form actions unless the whole page is blocked.
Open Button Loading StateSkeletons preserve layout context and make the wait feel shorter than an isolated spinner. Avoid: Avoid skeletons when the final layout is unpredictable or the fetch usually completes instantly.
Open Skeleton ScreenSearch needs fast input affordance, lightweight loading feedback, and a graceful zero-result state. Avoid: Avoid decorative search animations on search-first pages where the input should always be visible.
Open Expandable Search InputUploads need measurable progress when possible, then clear success or retry feedback. Avoid: Avoid fake percentage progress if the system cannot estimate completion.
Open Progress BarGuide attention only when the next action is important enough to interrupt the normal interface. Avoid: Avoid highlighting many elements at once or repeating the same tour after acknowledgement.
Open Spotlight / Coach MarkErrors should point to the exact fix before using broad page-level motion. Avoid: Avoid playful motion for destructive, financial, or security-sensitive failures.
Open Form Validation ErrorEnter your email to join our newsletter.
Use skeleton for layout context; add shimmer only when the placeholder would otherwise feel static during a longer wait.
Open Skeleton ScreenUse spinner for short or unknown waits; use progress bar when completion is measurable or the wait is long.
Open Spinner / Loading CircleUse toast for non-blocking confirmation; use a success screen when completion changes the user journey.
Open Toast NotificationUse scale for quiet button feedback, ripple for material-style surfaces, and haptic bounce for playful mobile-first actions.
Open Ripple EffectUse fade for simple state changes; use shared element transitions when preserving object continuity matters.
Open Fade TransitionUse active pill slide for segmented controls and filter chips, tab underline for navigation tabs, and fade for the content change that follows selection.
Open Active Pill SlideSelected mode
Overview
The moving pill shows continuity while the content below updates.
Disable the submitted button, show local progress, then confirm with a toast or success view depending on task importance.
Open Button Loading StateShow structure while data loads, hand off to staggered content reveal, and handle the empty result without feeling broken.
Open Skeleton ScreenMake search available, indicate fast querying, then distinguish result reveal from a true no-result state.
Open Expandable Search InputPrefer real progress, fall back to indeterminate motion only when progress is unknown, then show clear completion or retry feedback.
Open Progress BarStart with focused guidance, move to subtle reminders, and make completion visibly accumulate.
Open Spotlight / Coach MarkGive the tap a small press response, slide the selected pill to preserve state continuity, then fade the content into the newly selected result.
Open Scale on PressAvoid
A spinner that runs for long waits without explaining what is happening.
Open Skeleton ScreenAvoid
A determinate bar that advances without real progress data and then stalls near the end.
Open Indeterminate Progress BarAvoid
A modal that feels theatrical when the user expects immediate task focus.
Open Modal Enter / ExitAvoid
Cards jump, tilt, or shift so much that scanning a grid becomes unstable.
Open Hover Lift EffectAvoid
Large parallax, blur, or looping motion runs for every user regardless of accessibility preferences.
Open Fade Transition