HTML

Spinner

ExamplesDocumentationCSS Variables

Examples

Basic

Multiple sizes

Documentation

Accessibility

AttributeApplied toOutcome
role="progressbar".pf-c-spinnerIndicates to assistive technologies that this is an indeterminate progress indicator.
aria-valuetext="Loading...".pf-c-spinnerDescribes content that is being loaded, while it is loading.

Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.

Note: A live region must be present before changing its status in order for the change to be read. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Usage

ClassApplied toOutcome
.pf-c-spinner<span>Creates a spinner component. The default is an extra large spinner. Required
.pf-c-spinner__clipper<span>Creates the spinning line. Required
.pf-c-spinner__lead-ball<span>Rounds out the beginning of the spinning line. Required
.pf-c-spinner__tail-ball<span>Rounds out the end of the spinning line. Required
.pf-m-sm.pf-c-spinnerCreates a small spinner.
.pf-m-md.pf-c-spinnerCreates a medium spinner.
.pf-m-lg.pf-c-spinnerCreates a large spinner.
.pf-m-xl.pf-c-spinnerCreates an extra-large spinner.

CSS Variables

--pf-c-spinner__ball--after--Heightc_spinner__ball_after_Height
calc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner__ball--after--Widthc_spinner__ball_after_Width
calc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner__clipper--after--BoxShadowColorc_spinner__clipper_after_BoxShadowColor
var(--pf-global--primary-color--dark-100)
--pf-c-spinner__clipper--after--BoxShadowSpreadRadiusc_spinner__clipper_after_BoxShadowSpreadRadius
calc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner__clipper--after--Heightc_spinner__clipper_after_Height
var(--pf-global--icon--FontSize--xl)
--pf-c-spinner__clipper--after--Widthc_spinner__clipper_after_Width
var(--pf-global--icon--FontSize--xl)
--pf-c-spinner__clipper--Heightc_spinner__clipper_Height
var(--pf-global--icon--FontSize--xl)
--pf-c-spinner__clipper--Widthc_spinner__clipper_Width
var(--pf-global--icon--FontSize--xl)
--pf-c-spinner__lead-ball--after--BackgroundColorc_spinner__lead_ball_after_BackgroundColor
var(--pf-global--primary-color--dark-100)
--pf-c-spinner__tail-ball--after--BackgroundColorc_spinner__tail_ball_after_BackgroundColor
var(--pf-global--primary-color--dark-100)
--pf-c-spinner--AnimationDurationc_spinner_AnimationDuration
1.5s
--pf-c-spinner--AnimationTimingFunctionc_spinner_AnimationTimingFunction
cubic-bezier(.77, .005, .315, 1)
--pf-c-spinner--Colorc_spinner_Color
var(--pf-global--primary-color--dark-100)
--pf-c-spinner--diameterc_spinner_diameter
var(--pf-global--icon--FontSize--xl)
--pf-c-spinner--Heightc_spinner_Height
var(--pf-global--icon--FontSize--xl)
--pf-c-spinner--m-lg--diameterc_spinner_m_lg_diameter
var(--pf-global--icon--FontSize--lg)
--pf-c-spinner--m-md--diameterc_spinner_m_md_diameter
var(--pf-global--icon--FontSize--md)
--pf-c-spinner--m-sm--diameterc_spinner_m_sm_diameter
var(--pf-global--icon--FontSize--sm)
--pf-c-spinner--m-xl--diameterc_spinner_m_xl_diameter
var(--pf-global--icon--FontSize--xl)
--pf-c-spinner--stroke-widthc_spinner_stroke_width
calc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner--stroke-width-multiplierc_spinner_stroke_width_multiplier
.1
--pf-c-spinner--Widthc_spinner_Width
var(--pf-global--icon--FontSize--xl)