| Property | Values | Default |
|---|---|---|
| Type Variant | Rectangle | Square | Circle | Rectangle |
Skeleton vs Spinner vs Progress Indicator
|
Component |
Use when |
Strengths |
Don’t use when |
|---|---|---|---|
|
Skeleton |
The layout of the content is known, but data isn’t yet loaded (e.g., article list, product cards). |
Shows users what to expect, reduces layout shift, and keeps context clear. |
If the loading duration is very short, Skeleton may flash unnecessarily – use Spinner instead. If you need to show progress completion, use Progress Indicator. |
|
Spinner |
The duration is unknown or variable, often for short waits (e.g., server response, inline refresh). |
Lightweight, draws attention to activity, good for quick background tasks. |
If layout is known – use Skeleton. If loading will take long or has measurable progress – use Progress Indicator. |
|
Progress Indicator (not implemented yet) |
The task has a determinable length or steps (e.g., file upload, checkout process). |
Shows measurable progress, reduces uncertainty, best for long or critical tasks. |
If duration can’t be measured – use Spinner. If the content structure is known but not loaded yet, use Skeleton. |