Behavior comparison
Choose Skeleton for: Loading a card or article layout whose shape is known. Choose Spinner for: A short operation has no meaningful completion value.
| Dimension | SkeletonSkeleton | SpinnerSpinner |
|---|---|---|
| Trigger | Initial content loading begins while the expected layout is already known. | An operation with unknown remaining duration begins. |
| Modality | Non-modal placeholder; unaffected page regions remain usable. | Non-modal status indicator unless the surrounding workflow independently blocks interaction. |
| Placement | Occupies the same responsive layout and dimensions as the incoming content. | Close to the affected region or control without replacing unrelated content. |
| Interactivity | Not interactive and not focusable; real controls replace it only when ready. | Not interactive; an accessible status communicates that work is still in progress. |
| Focus | Focus remains on the existing page; replacing placeholders does not reorder or steal focus. | Focus remains on the initiating control unless a documented transition replaces the whole view. |
| Dismissal | Skeletons disappear only when replaced by content, an empty state, or an actionable error state. | The indicator ends when work resolves or is cancelled; it is never a manually dismissible message by itself. |
| Accessible role | aria-hidden placeholders with aria-busy on the content region | status text with aria-busy on the updated region |
| Use case | Loading a card or article layout whose shape is known | A short operation has no meaningful completion value |
| Mobile behavior | Match the mobile content geometry so replacement does not cause a layout jump. | Reserve stable space and pair the indicator with concise status text when waiting is noticeable. |