Spinner
On this page
On this page
Overview
A spinner indicates that an action is in progress. It appears as an animated circle over the section that is loading, and it may include a text label
Edit element properties
import '@rhds/elements/rh-spinner/rh-spinner.js';<rh-spinner></rh-spinner>import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Spinner />
);Preset sizes for the spinner
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- When loading a section is expected to take fewer than ten seconds
- When the structure or amount of content that's loading is unknown
Image of a spinner element
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in RH Elements |
| RH Shared Libs |
|
Component is available in RH Shared Libs |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.