Carbon Design System Loading
Documents loading indicators for processing states, expected waits over three seconds, full-page and component overlays, small inline loading, optional labels for context, disabled related actions while loading, and skeleton alternatives for progressively displayed content.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Infinite spinner | Flag this anti-pattern when a spinner or busy overlay can continue without a timeout, elapsed status, retry, cancel, fallback, or failure state. | The loading state is tied to a specific region, action, or object instead of freezing the entire interface without explanation. | Carbon documents loading indicators for processing states, recommends labels for context, and points users to alternatives when interaction is required to proceed. |
| Loading skeleton | Choose skeletons when the final content layout is known enough to reserve stable space. | Skeleton placeholders are not focusable, clickable, selectable, or announced as real content. | Carbon distinguishes loading indicators and skeleton states, recommending skeleton states for progressively displayed content. |
| Loading spinner | Choose loading spinner when the wait is indeterminate, short, and tied to a named action or region. | The spinner appears only after the operation starts and disappears or changes state when the operation resolves, fails, is cancelled, or moves to background. | Carbon supports scoped loading indicators, optional labels, inline and overlay placement, disabled related actions, and skeleton alternatives. |
Comparisons supported by this source
- Infinite spinner vs loading skeleton vs error state
Carbon documents contextual loading indicators, skeleton alternatives for progressive content, labels for wait context, and alternatives when interaction is required.
- Loading skeleton vs empty state vs error state
Carbon distinguishes loading indicators from skeleton states for progressive content loading.
- Loading spinner vs loading skeleton vs infinite spinner vs error state
Carbon supports full-page, component, and inline loading indicators, optional labels, disabled related actions, and skeleton alternatives.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: IBM Carbon Design System. Last checked: .