Skip to Content
Patternfly Logo

Spinner

Spinners are used to indicate to users that an action is in progress. For actions that may take a long time use a Progress Bar in place of a Spinner. Related design guidelines: Data loading

SpinnerExamplesPropsCSS Variables

Spinner

Examples

Basic

Size variations

Props

Spinner properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the Spinner.
size'sm' | 'md' | 'lg' | 'xl'No'xl'Size variant of progress.
aria-valuetextstringNo'Loading...'Aria value text

CSS Variables

--pf-c-spinner__ball--after--Heightc_spinner__ball_after_Height
calc(3.375rem*.1)
--pf-c-spinner__ball--after--Widthc_spinner__ball_after_Width
calc(3.375rem*.1)
--pf-c-spinner__clipper--after--BoxShadowColorc_spinner__clipper_after_BoxShadowColor
#06c
--pf-c-spinner__clipper--after--BoxShadowSpreadRadiusc_spinner__clipper_after_BoxShadowSpreadRadius
calc(3.375rem*.1)
--pf-c-spinner__clipper--after--Heightc_spinner__clipper_after_Height
3.375rem
--pf-c-spinner__clipper--after--Widthc_spinner__clipper_after_Width
3.375rem
--pf-c-spinner__clipper--Heightc_spinner__clipper_Height
3.375rem
--pf-c-spinner__clipper--Widthc_spinner__clipper_Width
3.375rem
--pf-c-spinner__lead-ball--after--BackgroundColorc_spinner__lead_ball_after_BackgroundColor
#06c
--pf-c-spinner__tail-ball--after--BackgroundColorc_spinner__tail_ball_after_BackgroundColor
#06c
--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
#06c
--pf-c-spinner--diameterc_spinner_diameter
3.375rem
--pf-c-spinner--Heightc_spinner_Height
3.375rem
--pf-c-spinner--m-lg--diameterc_spinner_m_lg_diameter
1.5rem
--pf-c-spinner--m-md--diameterc_spinner_m_md_diameter
1.125rem
--pf-c-spinner--m-sm--diameterc_spinner_m_sm_diameter
0.625rem
--pf-c-spinner--m-xl--diameterc_spinner_m_xl_diameter
3.375rem
--pf-c-spinner--stroke-widthc_spinner_stroke_width
calc(3.375rem*.1)
--pf-c-spinner--stroke-width-multiplierc_spinner_stroke_width_multiplier
.1
--pf-c-spinner--Widthc_spinner_Width
3.375rem