Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme dropdown Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed How to useProject FeltColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsColorAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Spinner Since v1.0.0

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsageUsagerh-spinnerImportingUsageUsagerh-spinner

Importing

Add rh-spinner to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-spinner/rh-spinner.js';
</script>
Copy to Clipboard Wrap lines

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>
Copy to Clipboard Wrap lines

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.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 1

Slot Name Summary Description
[default]

Optional text label displayed below the animated circle. Use a <p> element with a brief loading message (e.g. "Loading...").
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 1

Attribute DOM Property Description Type Default
size size

Preset sizes for the spinner

 
'sm' | 'md' | 'lg'
 
'lg'

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 12

CSS Property Description Default
--rh-spinner-container-animation-name

Container animation name for the SVG element

 none
--rh-spinner-container-animation-duration

Container animation duration for the SVG element

 0s
--rh-spinner-container-animation-timing

Container animation timing function for the SVG element

 linear
--rh-spinner-vector-effect

SVG vector-effect for stroke scaling behavior

 non-scaling-stroke
--rh-spinner-animation-duration

Dash circle animation duration

 1.4s
--rh-spinner-animation-timing

Dash circle animation timing function

 ease-out
--rh-spinner-rotate-start

Dash circle initial rotation

 -90deg
--rh-spinner-track-display

Track circle display property

 revert
--rh-spinner-animation-name

Dash circle animation name

Small dash circle animation name

 rh-spinner-small-animation-dash
--rh-spinner-dash-array

Dash circle stroke-dasharray value

Small dash circle stroke-dasharray value

 71
--rh-spinner-dash-offset

Dash circle stroke-dashoffset value

Small dash circle stroke-dashoffset value

 71
--rh-spinner-stroke-width

Stroke width of the spinner circle, in unitless SVG user units

Default spinner circle stroke width

Large spinner circle stroke width

Medium spinner circle stroke width

Small spinner circle stroke width

 3

Design Tokens 14

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 scheme)
--rh-color-gray-70

Track stroke color in dark mode

Tertiary surface (dark scheme)
--rh-size-icon-06

Large spinner circle diameter

64px icon box
--rh-font-size-body-text-lg

Large spinner text label font size

18px font size
--rh-size-icon-04

Medium spinner circle diameter

40px icon box
--rh-font-size-body-text-md

Medium spinner text label font size

16px font size
--rh-size-icon-01

Small spinner circle diameter

16px icon box
--rh-font-size-body-text-sm

Small spinner text label font size

14px font size
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify