Safe starting point
None under 1 s
Match the feedback to the wait
Applies to All viewports
What to show depends on how long people wait, not on what is loading. The thresholds below are NN/g's; the choice of indicator for each is Shortcut's.
Common range No indicator under about 1 s, an indicator from 1 to 10 s, progress beyond 10 s
- Under 0.1 s
- Show the result. It feels instant. No feedback is needed.
- 0.1–1 s
- Usually nothing. People notice the delay but keep their train of thought. A spinner here mostly adds flicker.
- 1–10 s
- A spinner or skeleton. Show that something is happening, in the place the content will appear.
- Over 10 s
- Progress, and a way out. Say how far along it is, and let people leave and come back.
Why?
Feedback that appears and vanishes inside a moment reads as a flicker. Feedback that never changes during a long wait reads as a crash.
When to deviate. On slow or unreliable connections, show the layout straight away and fill it in, even for short waits. People on those connections expect to wait and need to know it is working.
Common mistakes (4)
- A full-page spinner for one small panel.
- A spinner that flashes for a fraction of a second.
- No indication at all on a wait of several seconds.
- A progress bar that sticks at 99 percent.
Official guidanceNN/gWCAG
- NN/g
0.1 second is about the limit for feeling instantaneous. 1 second is about the limit for an uninterrupted flow of thought. 10 seconds is about the limit for keeping attention on the task.
NN/g, Response Times: The 3 Important Limits(opens in a new tab)Research-based best practice
- NN/g
As a rule of thumb, use percent-done progress indicators for operations taking more than about 10 seconds.
NN/g, Response Times: The 3 Important Limits(opens in a new tab)Research-based best practice
- WCAG
Status messages must be available to assistive technology without receiving focus.
WCAG 2.2, SC 4.1.3 Status Messages(opens in a new tab)Standard requirement
Applies to all viewports