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
Provides an animated loading indicator for when content is being
processed or fetched. A spinner should be used when loading takes
fewer than ten seconds and the content structure is unknown.
Authors must not use a spinner for indeterminate loading over ten
seconds; use a progress bar instead. Authors should avoid omitting
a text label, as screen readers rely on role="status" to announce
the ARIA live region. The element is not keyboard-focusable.
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
Optional text label displayed below the animated circle.
Use a |
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
|
Margin between spinner circle and text label 16px spacer |
|
--rh-font-family-body-text
|
Text label font family Body text font family |
|
--rh-font-weight-body-text-regular
|
Text label font weight Regular font weight |
|
--rh-line-height-body-text
|
Text label line height Line height for body text |
|
--rh-length-4xl
|
Default spinner circle diameter 64px length token |
|
--rh-color-accent-base
|
Animated indicator stroke color |
|
--rh-color-gray-10
|
Track stroke color in light mode Tertiary surface (light theme) |
|
--rh-color-gray-70
|
Track stroke color in dark mode Tertiary surface (dark theme) |
|
--rh-size-icon-06
|
64px icon box |
|
--rh-length-sm
|
Default spinner circle stroke width 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.
