Skip to content
Versions v3 v2 v1

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.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-spinner/pf-spinner.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

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

Loading...

Installation

npm install @patternfly/elements

Usage

Basic

Loading...
View HTML Source
<pf-spinner>Loading...</pf-spinner>
### Size variations
Loading... Loading... Loading... Loading...
View HTML Source
<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...
View HTML Source
<pf-spinner diameter="80px">Loading...</pf-spinner>

Slots

None

Attributes

size

Preset sizes for the spinner

DOM Property
size
Type
'sm' | 'md' | 'lg' | 'xl'
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-2024 Red Hat, Inc. Deploys by Netlify