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.

size

Values:

• sm
• md
• xl

Methods

None

Events

None

Styling hooks