Skip to content
Patternfly Logo

Spinner

A spinner is used to indicate to users that an action is in progress. For actions that may take a long time, use a progress bar instead.

Examples

Basic

Size variations

Custom size

Props

Spinner

*required
NameTypeDefaultDescription
aria-labelstringAccessible label to describe what is loading
aria-labelledBystringId of element which describes what is being loaded
aria-valuetextstring'Loading...'Text describing that current loading status or progress
classNamestring''Additional classes added to the Spinner.
diameterstringDiameter of spinner set as CSS variable
isSVGbooleanfalseWhether to use an SVG (new) rather than a span (old)
size'sm' | 'md' | 'lg' | 'xl''xl'Size variant of progress.

CSS variables

.pf-c-spinner--pf-c-spinner--diameter
3.375rem
.pf-c-spinner--pf-c-spinner--Width
3.375rem
.pf-c-spinner--pf-c-spinner--Height
3.375rem
.pf-c-spinner--pf-c-spinner--Color
#06c
.pf-c-spinner--pf-c-spinner--m-sm--diameter
0.625rem
.pf-c-spinner--pf-c-spinner--m-md--diameter
1.125rem
.pf-c-spinner--pf-c-spinner--m-lg--diameter
1.5rem
.pf-c-spinner--pf-c-spinner--m-xl--diameter
3.375rem
.pf-c-spinner.pf-m-sm--pf-c-spinner--diameter
0.625rem
.pf-c-spinner.pf-m-md--pf-c-spinner--diameter
1.125rem
.pf-c-spinner.pf-m-lg--pf-c-spinner--diameter
1.5rem
.pf-c-spinner.pf-m-xl--pf-c-spinner--diameter
3.375rem
span.pf-c-spinner--pf-c-spinner--AnimationDuration
1.5s
span.pf-c-spinner--pf-c-spinner--AnimationTimingFunction
cubic-bezier(.77, .005, .315, 1)
span.pf-c-spinner--pf-c-spinner--stroke-width-multiplier
.1
span.pf-c-spinner--pf-c-spinner--stroke-width
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__clipper--Width
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--Height
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--after--BoxShadowColor
#06c
span.pf-c-spinner--pf-c-spinner__clipper--after--Width
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--after--Height
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--after--BoxShadowSpreadRadius
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__lead-ball--after--BackgroundColor
#06c
span.pf-c-spinner--pf-c-spinner__ball--after--Width
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__ball--after--Height
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__tail-ball--after--BackgroundColor
#06c
svg.pf-c-spinner--pf-c-spinner--diameter
3.375rem
svg.pf-c-spinner--pf-c-spinner--AnimationDuration
1.4s
svg.pf-c-spinner--pf-c-spinner--AnimationTimingFunction
linear
svg.pf-c-spinner--pf-c-spinner--stroke-width
10
svg.pf-c-spinner--pf-c-spinner__path--Stroke
#06c
svg.pf-c-spinner--pf-c-spinner__path--StrokeWidth
10
svg.pf-c-spinner--pf-c-spinner__path--AnimationTimingFunction
ease-in-out
svg.pf-c-spinner--pf-c-spinner--m-sm--diameter
0.625rem
svg.pf-c-spinner--pf-c-spinner--m-md--diameter
1.125rem
svg.pf-c-spinner--pf-c-spinner--m-lg--diameter
1.5rem
svg.pf-c-spinner--pf-c-spinner--m-xl--diameter
3.375rem
svg.pf-c-spinner.pf-m-sm--pf-c-spinner--diameter
0.625rem
svg.pf-c-spinner.pf-m-md--pf-c-spinner--diameter
1.125rem
svg.pf-c-spinner.pf-m-lg--pf-c-spinner--diameter
1.5rem
svg.pf-c-spinner.pf-m-xl--pf-c-spinner--diameter
3.375rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines