PatternFly Elements

Spinner

Overview

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.

A spinner is used to indicate to users that an action is in progress.

Loading...

Installation

npm install @patternfly/elements

Usage

Basic

Loading...

<pf-spinner>Loading...</pf-spinner>

Size variations

Loading... Loading... Loading... Loading...

<pf-spinner size="sm">Loading...</pf-spinner>
<pf-spinner size="md">Loading...</pf-spinner>
<pf-spinner size="lg">Loading...</pf-spinner>
<pf-spinner size="xl">Loading...</pf-spinner>

Custom size

Loading...

<pf-spinner diameter="80px">Loading...</pf-spinner>

Slots

None

Attributes

size

Preset sizes for the spinner

DOM Property
size
Type
SpinnerSize
Default
'xl'
diameter

Custom diameter of spinner set as CSS variable

DOM Property
diameter
Type
`${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}` | undefined
Default
unknown

DOM Properties

None

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-spinner--diameter 3.375rem
--pf-c-spinner--Width 3.375rem
--pf-c-spinner--Height 3.375rem
--pf-c-spinner--Color #06c
--pf-c-spinner--m-sm--diameter 0.625rem
--pf-c-spinner--m-md--diameter 1.125rem
--pf-c-spinner--m-lg--diameter 1.5rem
--pf-c-spinner--m-xl--diameter 3.375rem
--pf-c-spinner--AnimationDuration 1.4s
--pf-c-spinner--AnimationTimingFunction linear
--pf-c-spinner--stroke-width 10
--pf-c-spinner__path--Stroke #06c
--pf-c-spinner__path--StrokeWidth 10
--pf-c-spinner__path--AnimationTimingFunction ease-in-out

CSS Shadow Parts

None

© 2018-2023 Red Hat, Inc. Deploys by Netlify