Progress Indicator

Overview

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

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

Methods

Events

CSS Custom Properties

CSS Shadow Parts

None