Skip to content
PatternFly

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

Sizes

Inline

An inline spinner inherits its font-size, so its size will match the content around it.

Custom size

Documentation

Accessibility

Attribute
Applied to
Outcome
role="progressbar"
.pf-v5-c-spinner
Indicates to assistive technologies that this is an indeterminate progress indicator.
aria-label="Loading..."
.pf-v5-c-spinner
Provides an accessible name for the spinner. Note: one of aria-label or aria-labelledby is required.
aria-labelledby="[id of spinner label]"
.pf-v5-c-spinner
Gives the spinner an accessible name by referring to the element that labels the spinner.
aria-describedby="[id of spinner description]"
.pf-v5-c-spinner
Gives the spinner an accessible description by referring to the element that describes the spinner.

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-v5-c-spinner
<svg>
Creates a spinner component. The default is an extra large spinner. Required
.pf-v5-c-spinner__path
<circle>
Creates a spinner circle component. Required
--pf-v5-c-spinner--diameter
.pf-v5-c-spinner
Modifies the value for --pf-v5-c-spinner--diameter declaration.

Modifiers

Class
Applied to
Outcome
.pf-m-sm
.pf-v5-c-spinner
Creates a small spinner.
.pf-m-md
.pf-v5-c-spinner
Creates a medium spinner.
.pf-m-lg
.pf-v5-c-spinner
Creates a large spinner.
.pf-m-xl
.pf-v5-c-spinner
Creates an extra-large spinner.
.pf-m-inline
.pf-v5-c-spinner
Creates an inline spinner.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-spinner--pf-v5-c-spinner--diameter
3.375rem
.pf-v5-c-spinner--pf-v5-c-spinner--Width
3.375rem
.pf-v5-c-spinner--pf-v5-c-spinner--Height
3.375rem
.pf-v5-c-spinner--pf-v5-c-spinner--Color
#06c
.pf-v5-c-spinner--pf-v5-c-spinner--m-sm--diameter
0.75rem
.pf-v5-c-spinner--pf-v5-c-spinner--m-md--diameter
1rem
.pf-v5-c-spinner--pf-v5-c-spinner--m-lg--diameter
1.5rem
.pf-v5-c-spinner--pf-v5-c-spinner--m-xl--diameter
3.375rem
.pf-v5-c-spinner--pf-v5-c-spinner--m-inline--diameter
1em
.pf-v5-c-spinner.pf-m-inline--pf-v5-c-spinner--diameter
1em
.pf-v5-c-spinner.pf-m-sm--pf-v5-c-spinner--diameter
0.75rem
.pf-v5-c-spinner.pf-m-md--pf-v5-c-spinner--diameter
1rem
.pf-v5-c-spinner.pf-m-lg--pf-v5-c-spinner--diameter
1.5rem
.pf-v5-c-spinner.pf-m-xl--pf-v5-c-spinner--diameter
3.375rem
svg.pf-v5-c-spinner--pf-v5-c-spinner--diameter
3.375rem
svg.pf-v5-c-spinner--pf-v5-c-spinner--AnimationDuration
1.4s
svg.pf-v5-c-spinner--pf-v5-c-spinner--AnimationTimingFunction
linear
svg.pf-v5-c-spinner--pf-v5-c-spinner--stroke-width
10
svg.pf-v5-c-spinner--pf-v5-c-spinner__path--Stroke
#06c
svg.pf-v5-c-spinner--pf-v5-c-spinner__path--StrokeWidth
10
svg.pf-v5-c-spinner--pf-v5-c-spinner__path--AnimationTimingFunction
ease-in-out
svg.pf-v5-c-spinner--pf-v5-c-spinner--m-sm--diameter
0.75rem
svg.pf-v5-c-spinner--pf-v5-c-spinner--m-md--diameter
1rem
svg.pf-v5-c-spinner--pf-v5-c-spinner--m-lg--diameter
1.5rem
svg.pf-v5-c-spinner--pf-v5-c-spinner--m-xl--diameter
3.375rem
svg.pf-v5-c-spinner.pf-m-sm--pf-v5-c-spinner--diameter
0.75rem
svg.pf-v5-c-spinner.pf-m-md--pf-v5-c-spinner--diameter
1rem
svg.pf-v5-c-spinner.pf-m-lg--pf-v5-c-spinner--diameter
1.5rem
svg.pf-v5-c-spinner.pf-m-xl--pf-v5-c-spinner--diameter
3.375rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines