PatternFly Elements - Home PatternFly Elements v2 prerelease v1

Spinner

Overview

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

Loading...

Installation

npm install @patternfly/pfe-spinner

Usage

Basic

Loading...

<pfe-spinner>Loading...</pfe-spinner>

Size variations

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

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

Custom size

Loading...

<pfe-spinner diameter="80px">Loading...</pfe-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