Spinner
Importing
Add rh-spinner to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-spinner/rh-spinner.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-spinner></rh-spinner>
<script type="module">
import '@rhds/elements/rh-spinner/rh-spinner.js';
</script>Usage
Default/Large Spinner
<rh-spinner></rh-spinner>Medium Spinner
<rh-spinner size="md"></rh-spinner>Small Spinner
<rh-spinner size="sm"></rh-spinner>rh-spinner
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
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
Optional text label below the animated circle. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
size
|
size |
Preset sizes for the spinner |
|
|
Methods
None
Events
None
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-lg
|
16px spacer |
|
--rh-font-family-body-text
|
Body text font family |
|
--rh-font-weight-body-text-regular
|
Regular font weight |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-length-4xl
|
64px length token |
|
--rh-color-accent-base
|
|
|
--rh-color-gray-10
|
Tertiary surface (light theme) |
|
--rh-color-gray-70
|
Tertiary surface (dark theme) |
|
--rh-size-icon-06
|
64px icon box |
|
--rh-length-sm
|
6px length token |
|
--rh-font-size-body-text-lg
|
18px font size |
|
--rh-size-icon-04
|
40px icon box |
|
--rh-length-xs
|
4px length token |
|
--rh-font-size-body-text-md
|
16px font size |
|
--rh-size-icon-01
|
16px icon box |
|
--rh-length-2xs
|
3px length token |
|
--rh-font-size-body-text-sm
|
14px font size |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
