Progress
A segmented progress bar with a pal running along the front.
<piix-progress>DOM + canvas<piix-progress value="40"></piix-progress>
Pal
Tone
Blocks fill in one segment at a time and a pal runs along the leading edge, keeping pace. At 100% it stops and cheers. Leave out the value and it's indeterminate: the pal paces back and forth.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just progress (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/progress.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-progress value="40"></piix-progress>
);
}
Usage
<piix-progress value="40"></piix-progress>
Examples
Working…
No value: indeterminate.
<piix-progress pal="penguin" tone="sky" label="Uploading"></piix-progress>
API reference
| Attribute | What it does | Default |
|---|---|---|
value | how far, 0 to max (leave out for "working…") | – |
max | the end | 100 |
pal | who runs | pix |
tone | the fill colour | lime |
segments | how many blocks | 20 |
label | what's loading, for screen readers | Loading |
Accessibility
- Announced as a progress bar with its value.