React

Spinner

Info alert:Experimental feature

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

Spinner

Examples

Basic

Size variations

Props

Spinner properties
NameTypeRequiredDefaultDescription
className''null
size'xl'null
aria-valuetext'Loading...'null

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)