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.

size

Values:

Methods

None

Events

None

Styling hooks

Variable name Default value Use
--pfe-progress-indicator--background-color rgba(0, 0, 0, .25) Color of the circle
--pfe-progress-indicator--foreground-color rgba(0, 0, 0, .75) Color of the spinner
--pfe-progress-indicator--Width 2rem Width of the circle
--pfe-progress-indicator--Height 2rem Height of the circle