Loading spinners and progress icons

A spinner says “something is happening.” But spinners aren't always the right call — sometimes a progress bar or a skeleton screen serves users far better. Here's how to choose and how to do it accessibly.

Spinner vs progress vs skeleton

• Spinner — for short, indeterminate waits (a second or two).
• Progress bar — when you can estimate completion; reduces anxiety on longer tasks.
• Skeleton screen — for content that's loading into a known layout; feels faster than a spinner.

Make it accessible

Give loading indicators an accessible label (e.g. role="status" with “Loading…”), and respect prefers-reduced-motion by easing or reducing the animation. Don't trap keyboard focus behind a spinner.

Don't overuse

Instant actions don't need spinners; a flash of spinner on a 100ms request looks janky. Delay showing a spinner slightly so quick responses stay snappy.

Frequently asked questions