Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Spinner

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleSizesColor schemeConfigurationSpaceInteraction statesStyleSizesColor schemeConfigurationSpaceInteraction states

Style

A spinner is an animated line segment that follows a track and may include an optional text label.

Anatomy

Anatomy of a spinner with annotations; number 1 is pointing to the track, number 2 is pointing to the indicator, and number 3 is pointing to the optional text label
  1. Track
  2. Indicator
  3. Optional text label

Sizes

A spinner comes in large, medium, and small sizes. Each size includes an optional text label on the bottom.

Small size, medium size, and large size spinners with their text labels below
Size Element Current value
Small Text label size 14px
0.875rem
Medium Text label size 16px
1.0rem
Large Text label size 18px
1.125rem

Color scheme

A spinner is available in both light and dark color schemes.

Light scheme

Light scheme spinner

Dark scheme

Dark scheme spinner

Configuration

Container

A spinner is centered horizontally and vertically within a container and the viewport by default. This demonstrates that the whole container is loading rather than one specific area.

Diagram of how a spinner should be horizontally and vertically centered within a container no matter its size or if a text label is included or not

Button

If a small size spinner is used within a button, it can be positioned to the left of the text as if it were an icon.

Button with a small size spinner icon to the left as if it were an icon

Space

Spacing between all spinner sizes and their text labels

Interaction states

A spinner is intentionally not operable or navigable and has no interaction states.

Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify