Spinner
On this page
On this page
Usage
Default/Large Spinner
<rh-spinner></rh-spinner>Medium Spinner
<rh-spinner size="md"></rh-spinner>Small Spinner
<rh-spinner size="sm"></rh-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
| Slot Name | Description |
|---|---|
|
Optional text label below the animated circle. |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
size |
size |
Preset sizes for the spinner |
|
|
| Token | Copy |
|---|---|
--rh-color-accent-base
|
|
--rh-color-gray-10
|
|
--rh-color-gray-70
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-lg
|
|
--rh-font-size-body-text-md
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-weight-body-text-regular
|
|
--rh-length-2xs
|
|
--rh-length-4xl
|
|
--rh-length-sm
|
|
--rh-length-xs
|
|
--rh-line-height-body-text
|
|
--rh-size-icon-01
|
|
--rh-size-icon-04
|
|
--rh-size-icon-06
|
|
--rh-space-lg
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
