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
<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.
// 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 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 with Prettier to have the style rules applied on every save.