PatternFly Elements - Home PatternFly Elements

Progress Indicator

Overview

Progress indicator indicates that the user is waiting on a process: page load, HTTP request, image loading, etc.

My fallback loading message

My fallback loading message

My fallback loading message

Installation

npm install @patternfly/pfe-progress-indicator

Usage

  <pfe-progress-indicator indeterminate>
<h1>My fallback loading message</h1>
</pfe-progress-indicator>

Slots

Default Slot

The provided element should contain a fallback loading message if JavaScript should fail for any reason. When the element is connected, the loading message is visually hidden, and replaced by an animated "spinner".

<!--The web component that upgrades to a "loader"-->
<pfe-progress-indicator indeterminate>
<!--your custom message for JS failure AND a11y technologies-->
<h1>
This text will be seen if JS fails, but will be hidden on upgrade.
Screen readers will still see it as a part of the DOM.
</h1>
</pfe-progress-indicator>

Attributes

indeterminate

Uses the spinner style display. Currently this is on the only supported display.

DOM Property
indeterminate
Type
boolean
Default
false
size

Size

DOM Property
size
Type
'sm'|'md'|'xl' | undefined
Default
'md'

DOM Properties

None

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pfe-progress-indicator--background-color

Color of the circle

rgba(0, 0, 0, .25)

--pfe-progress-indicator--foreground-color

Color of the spinner

rgba(0, 0, 0, .75)

--pfe-progress-indicator--Width

Width of the circle

2rem

--pfe-progress-indicator--Height

Height of the circle

2rem

CSS Shadow Parts

None