React

Spinner

ExamplesPropsCSS Variables

Examples

Danger alert:Warning

Use this component at your own risk, it's currently under development and is subject to change.

Spinner

Copied to clipboard

Spinner size variations

Copied to clipboard

Props

Spinner Props

The Spinner component accepts the following props.

NameTypeRequiredDefaultDescription
className''
size'xl'
aria-valuetext'Loading...'

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