Loading
Loading lets the user know the system is working on something. This could mean it's fetching data, checking submissions, navigating, or generating results.
Inline
Use case
- Local actions (affects this element only)
- Avoids blocking the whole UI
- 0.5 to 2 seconds
Do's
- Show immediately (right after the action)
Don'ts
- Do not combine local actions with Skeleton or Spinner
Summary
Stay right here, I'm working on just this part.
Spinner (simple)
Use case
- Inline or standalone
- Duration unknown
- Loading is short
- Blocks interaction entirely
- Single item is affected
- 1 to 3 seconds
Do's
- Show immediately
- Pair with overlay (e.g. “Popup”) (not inline)
Don'ts
- Do not remove the context while loading
- Do not fake progress
- Do not combine multiple loading patterns
Summary
When progress is unknown, but short.
Skeleton
Use case
- Short to medium loading times
- Affects bigger content blocks
- Reducing perceived waiting time
- 1 to 4 seconds
Do's
- Show immediately
- Preserve layout to prevent layout jumps
- Enables predictability
- Reduces cognitive load
Don'ts
- Do not use it when expected loading is unknown
- Do not combine multiple loading patterns
Summary
Turning waiting into anticipation. Users can see the shape of what's coming.
Progress Bar
Use case
- Measurable progress
- Progress time is substantial
- When horizontal space available (vs. Spinner with %)
- If it involves linear & systematic steps
- Left to right progress maps naturally
- 3 to 10 seconds
Do's
- Show immediately
- Provide a cancel option for longer running tasks
Don'ts
- Do not remove the context while loading
- Do not fake progress
- Do not combine multiple loading patterns
Summary
Longer progress is measurable and is mapping naturally from left to right.
Spinner (with %)
25%
Use case
- Measurable progress
- Progress time is substantial
- Compact solution (vs. Progress Bar)
- 3 to 10 seconds
Do's
- Show immediately
- You may add meaningful messages for loading states, e.g.: “Loading database”
- Provide a cancel option for longer running tasks
- Pair with overlay (e.g. "Popup") (not inline)
Don'ts
- Do not remove the context while loading
- Do not fake progress
- Do not combine multiple loading patterns
Summary
A compact solution for longer and measurable progress.