Waiting states

Loading & Progress Micro-Interactions

Waiting feedback should match what the system actually knows. Use determinate progress when a real percentage exists, a spinner for a compact unknown wait, and a skeleton when preserving the incoming layout reduces perceived delay.

Match certainty: Never show a fake percentage for unknown work.
Hold the layout: Reserve the space the finished content will use.
Explain long waits: Add a label when progress takes more than a beat.

Pattern examples

4 ways to communicate the state change

Hover, focus, press, or toggle the specimens. Each recipe keeps the durable state in semantic markup and uses animation as a supporting layer.

Skeleton shimmer

Sweep a low-contrast highlight across placeholder shapes that match the incoming content.

Keep the shimmer subtle and remove it entirely for reduced-motion users.

animation: shimmer 1.6s ease-in-out infinite;

Progress fill

Animate a bar toward the latest known completion value without implying more precision than exists.

Expose the numeric value through a progress element or an equivalent accessible name and value.

transition: inline-size 300ms ease-out;

Button spinner

Place a small rotating indicator inside the control that started the work.

Use it for short waits; graduate to labeled progress when the task lasts longer.

animation: spin 700ms linear infinite;

Dots pulse

Stagger three quiet dots to show that a conversational or background response is still forming.

Keep all dots visible in the reduced-motion fallback so the status does not vanish.

animation: dot-pulse 900ms ease-in-out infinite;
animation-delay: calc(var(--i) * 120ms);

Implementation check

Ship the fallback with the effect.

Test keyboard focus, touch, reduced motion, slow work, failure, repeated activation, and the final resting state. A robust interaction remains understandable when every transition is removed.

@media (prefers-reduced-motion: reduce) {
  .motion {
    animation: none;
    transform: none;
    transition-duration: 0.01ms;
  }
}

Continue the reference

Related micro-interaction guides

Compare the neighboring feedback patterns before choosing an effect.

View all patterns

Buttons & formsExplore toggle, search, checkbox, counter, and press micro-interactions with practical timing, accessibility, and CSS examples.Read guide Feedback & validationDesign loading, error, success, copy, notification, and tooltip micro-interactions that confirm actions without relying on motion alone.Read guide Navigation & transitionsRoute progress bars, sliding tab indicators, view transitions, condensing headers, and scroll progress that keep navigation legible.Read guide

Plan the complete React experience.

Map the components and states around these interactions, then generate the project structure from one visual workspace.

Start planning free