Skip to content
Patternfly Logo

Examples

Basic

Multiple sizes

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.

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--pf-c-spinner--AnimationDuration
1.5s
.pf-c-spinner--pf-c-spinner--AnimationTimingFunction
cubic-bezier(.77, .005, .315, 1)
.pf-c-spinner--pf-c-spinner--diameter
3.375rem
.pf-c-spinner--pf-c-spinner--stroke-width-multiplier
.1
.pf-c-spinner--pf-c-spinner--stroke-width
calc(3.375rem * .1)
.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-c-spinner__clipper--Width
3.375rem
.pf-c-spinner--pf-c-spinner__clipper--Height
3.375rem
.pf-c-spinner--pf-c-spinner__clipper--after--BoxShadowColor
#06c
.pf-c-spinner--pf-c-spinner__clipper--after--Width
3.375rem
.pf-c-spinner--pf-c-spinner__clipper--after--Height
3.375rem
.pf-c-spinner--pf-c-spinner__clipper--after--BoxShadowSpreadRadius
calc(3.375rem * .1)
.pf-c-spinner--pf-c-spinner__lead-ball--after--BackgroundColor
#06c
.pf-c-spinner--pf-c-spinner__ball--after--Width
calc(3.375rem * .1)
.pf-c-spinner--pf-c-spinner__ball--after--Height
calc(3.375rem * .1)
.pf-c-spinner--pf-c-spinner__tail-ball--after--BackgroundColor
#06c
.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

View source on GitHub