HTML

Spinner

Info alert:Experimental feature

This is an experimental feature in the early stages of testing. It's not intended for production use.
ExamplesDocumentationCSS Variables

Examples

Spinner

Copied to clipboard

Spinner size variations

Copied to clipboard

Documentation

Accessibility

Attribute Applied to Outcome
role="progressbar" .pf-c-spinner Indicates to assistive technologies that this is an indeterminate progress indicator.
aria-valuetext="Loading..." .pf-c-spinner Describes 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

Class Applied to Outcome
.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-spinner Creates a small spinner.
.pf-m-md .pf-c-spinner Creates a medium spinner.
.pf-m-lg .pf-c-spinner Creates a large spinner.
.pf-m-xl .pf-c-spinner Creates an extra-large spinner.

CSS Variables

--pf-c-spinner--AnimationDurationc_spinner_AnimationDuration1.5s
--pf-c-spinner--AnimationTimingFunctionc_spinner_AnimationTimingFunctioncubic-bezier(.77, .005, .315, 1)
--pf-c-spinner--Colorc_spinner_Colorvar(--pf-global--primary-color--dark-100)
--pf-c-spinner--Heightc_spinner_Heightvar(--pf-global--icon--FontSize--xl)
--pf-c-spinner--Widthc_spinner_Widthvar(--pf-global--icon--FontSize--xl)
--pf-c-spinner__ball--after--Heightc_spinner__ball_after_Heightcalc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner__ball--after--Widthc_spinner__ball_after_Widthcalc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner__clipper--Heightc_spinner__clipper_Heightvar(--pf-global--icon--FontSize--xl)
--pf-c-spinner__clipper--Widthc_spinner__clipper_Widthvar(--pf-global--icon--FontSize--xl)
--pf-c-spinner__clipper--after--BoxShadowColorc_spinner__clipper_after_BoxShadowColorvar(--pf-global--primary-color--dark-100)
--pf-c-spinner__clipper--after--BoxShadowSpreadRadiusc_spinner__clipper_after_BoxShadowSpreadRadiuscalc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner__clipper--after--Heightc_spinner__clipper_after_Heightvar(--pf-global--icon--FontSize--xl)
--pf-c-spinner__clipper--after--Widthc_spinner__clipper_after_Widthvar(--pf-global--icon--FontSize--xl)
--pf-c-spinner__lead-ball--after--BackgroundColorc_spinner__lead_ball_after_BackgroundColorvar(--pf-global--primary-color--dark-100)
--pf-c-spinner__tail-ball--after--BackgroundColorc_spinner__tail_ball_after_BackgroundColorvar(--pf-global--primary-color--dark-100)
--pf-c-spinner--diameterc_spinner_diametervar(--pf-global--icon--FontSize--xl)
--pf-c-spinner--m-lg--diameterc_spinner_m_lg_diametervar(--pf-global--icon--FontSize--lg)
--pf-c-spinner--m-md--diameterc_spinner_m_md_diametervar(--pf-global--icon--FontSize--md)
--pf-c-spinner--m-sm--diameterc_spinner_m_sm_diametervar(--pf-global--icon--FontSize--sm)
--pf-c-spinner--m-xl--diameterc_spinner_m_xl_diametervar(--pf-global--icon--FontSize--xl)
--pf-c-spinner--stroke-widthc_spinner_stroke_widthcalc(var(--pf-global--icon--FontSize--xl) * .1)
--pf-c-spinner--stroke-width-multiplierc_spinner_stroke_width_multiplier.1