Loader
Also known as: Spinner, Activity indicator
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | 2Xs | Xs | Sm | Md | Lg | Md |
When to use
When an action is processing and the user is waiting for a result (e.g., submitting a form or loading new content).
When the duration is unknown, and progress can’t be measured.
When progress can be tracked or estimated, use a progress instead.
When the delay is too short to be noticeable, instant updates feel smoother.
When it disrupts the flow unnecessarily, use placeholder instead.
Size
Dimensions of the loader are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
scale.css
--scale-width-<size>
--scale-height-<size>