Spinner
Allow users to know that their action is being processed or that content is loading for an indeterminate amount of time
#Spinner vs. Progress bar
To clarify the differences between Spinner and ProgressBar, a short description is provided.
| Component name | Purpose | User interaction | Usage |
|---|---|---|---|
| Spinner | Indicates an ongoing process with an unknown or indefinite duration. | No user interaction is typically possible during the process. | Loading content, refreshing data, background tasks. |
| Progress bar | Shows the progress of a process with a known or estimated duration. | User interaction may be possible during the process (e.g., cancellation). | Uploading/downloading files, multi-step forms, progress towards goals. |
#Examples
The Spinner component offers several properties to customize its appearance and behavior. The following sections illustrate these properties and explain their appropriate use cases.
#Default
Choose between dark or light variants to ensure contrast with the background.
<div style={{ padding: 16 }}>
<Spinner variant="dark" />
</div>
<div style={{ padding: 16, background: ColorGrayDarkest }}>
<Spinner variant="light" />
</div>#Size
Select small, medium (default), or large to fit theSpinner appropriately within its container.
<div style={{ display: "flex" }}>
<Spinner variant="dark" size="large" />
<Spinner variant="dark" size="medium" />
<Spinner variant="dark" size="small" />
</div>#Presentational
Set the presentational property to true to hide the Spinnerfrom assistive technologies like screen readers. Use this property when another UI element is already conveying the loading state to assistive technology users.
<Spinner variant="dark" presentational />#Delayed Appearance
In some cases, the action indicated by the Spinner might complete rapidly. This can lead to the Spinner appearing and disappearing quickly, causing UI flickering. To avoid this, set the appearanceDelay property to control the time (in milliseconds) the Spinner waits before becoming visible. The default delay is 200ms.
const [isVisible, setVisibility] = useState<boolean>(false);
return (
<div style={{ display: "flex" }}>
<Button onClick={() => setVisibility(!isVisible)} variant="primary">
{isVisible ? "Hide Spinner" : "Show Spinner"}
</Button>
{isVisible && <Spinner appearanceDelay={1000} variant="dark" />}
</div>
);#Properties
| Property | Description | Defined | Value |
|---|---|---|---|
variantRequired | "dark" | "light"Color of the spinner | ||
sizeOptional | "large" | "medium" | "small"Size of the spinner (defaults to `"medium"`) | ||
presentationalOptional | booleanHides the spinner from assistive technology | ||
appearanceDelayOptional | numberTime in milliseconds for delaying appearance (defaults to 200ms ) | ||
data-observe-keyOptional | stringUnique string, used by external script e.g. for event tracking | ||
classNameOptional | stringCustom className that's applied to the outermost element (only intended for special cases) | ||
styleOptional | objectStyle object to apply custom inline styles (only intended for special cases) |
#Guidelines
#Best practices
#Do not use when
#Accessibility
Explore detailed guidelines for this component: Accessibility Specifications