Loader
Little pixel spinners drawn on the GPU.
<piix-loader>WebGL<piix-loader size="96"></piix-loader>
Kind
Palette
A ring that chases its tail, pixels in orbit, a snake running round a square, equaliser bars, and rings pulsing out.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just loader (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/loader.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-loader size="96"></piix-loader>
);
}
Usage
<piix-loader size="96"></piix-loader>
Examples
Every kind
<piix-loader></piix-loader> <piix-loader kind="orbit" palette="candy"></piix-loader> <piix-loader kind="snake" palette="sunset"></piix-loader> <piix-loader kind="bars" palette="ocean"></piix-loader> <piix-loader kind="pulse" palette="violet"></piix-loader>
API reference
| Attribute | What it does | Default |
|---|---|---|
kind | ring orbit snake bars pulse | ring |
palette | the colours: lime aurora sunset ocean candy violet fire gameboy paper mono, or your own, dark to light: "#000,#6b4cff,#fff" | lime |
size | px | 48 |
label | what's loading | Loading |
pixel | size of one pixel, in px | 3 |
Accessibility
- Announced as a status: "Loading", or your label.