# @patternfly/pfe-progress-indicator

> Progress element for PatternFly Elements

Latest version **1.12.3** (published 2022-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @patternfly/pfe-progress-indicator
pnpm add @patternfly/pfe-progress-indicator
yarn add @patternfly/pfe-progress-indicator
bun add @patternfly/pfe-progress-indicator
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.12.3 |
| Published | 2022-02-01 |
| First published | 2019-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 61.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 396 |
| Author | Daniel Faucette |
| Maintainers | ctrowbri, dgutride, dlabrecq, patternfly-build, jeff-phillips-18, mturley, mwcz, kylebuch8, realredallen, ktotten, evwilkin, schulj12, castastrophe, nicolethoen, heymp, zhawkins |
| Keywords | web-components, html |

## Links

- npm: https://www.npmjs.com/package/@patternfly/pfe-progress-indicator
- Repository: https://github.com/patternfly/patternfly-elements
- Homepage: https://github.com/patternfly/patternfly-elements#readme
- Issues: https://github.com/patternfly/patternfly-elements/issues
- npm.io page: https://npm.io/package/@patternfly/pfe-progress-indicator

## Dependencies (1)

- [@patternfly/pfelement](https://npm.io/package/@patternfly/pfelement.md) ^1.12.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.12.3 (latest) — 2022-02-01
- 2.0.0-next.4 (next) — 2022-08-23
- 2.0.0-next.3 — 2022-07-24
- 2.0.0-next.2 — 2022-04-18
- 2.0.0-next.1 — 2022-03-23
- 2.0.0-next.0 — 2022-02-23
- 1.12.2 — 2021-11-16
- 1.12.1 — 2021-11-16
- 1.12.0 — 2021-11-12
- 1.11.2 — 2021-09-29
- 1.11.1 — 2021-09-03
- 1.11.0 — 2021-08-18
- 1.10.1 — 2021-07-12
- 1.10.0 — 2021-07-08
- 1.9.3 — 2021-06-16
- … 45 more at https://npm.io/package/@patternfly/pfe-progress-indicator/versions

## README

# PFElements Progress Indicator Element

`pfe-progress-indicator` is a "loader" that indicates to the user that part of the web page is loading, or waiting on other http events to be ready to use.

## Usage
```html
<pfe-progress-indicator indeterminate>
  <h1>My fallback loading message</h1>
</pfe-progress-indicator>
```

At the time of writing there is only one style variant, `pfe-indeterminate` that spins without informing the user of where they are in the waiting process, only that http activity has not been resolved. This may change in the future as more style variants become available.

## Slots

Progress Indicator has one unnamed slot only.

### Default slot

We expect any html tag to be the first child inside `pfe-progress-indicator` element. 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".

E.g.

```html
// 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

Possible values: `sm`, `md`, `xl`

## Styling

### Variable 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 |

## Test

    npm run test

## Build

    npm run build

## Demo

From the PFElements root directory, run:

    npm start

## Code style

Progress Indicator (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://prettier.io/docs/en/editors.html
[web-component-tester]: https://github.com/Polymer/web-component-tester

---
_Source: https://npm.io/package/@patternfly/pfe-progress-indicator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._