# Pixel loaders
> Six pixel loading indicators (orbit, snake, helix, scan, rain, pulse); clicking one finishes it with a check before it restarts.
- Element: `<px-spinners>`
- React: `import { PxSpinners } from "@/components/lumesec/px-spinners"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-spinners.json
- Page: https://elements.lumesec.ai/components/pixel-lab/spinners



Live preview: https://elements.lumesec.ai/view/px-spinners

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-spinners.js"></script>

<px-spinners></px-spinners>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-spinners
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-spinners.json
```

## Usage

React:

```tsx
import { PxSpinners } from "@/components/lumesec/px-spinners";

export function Example() {
  return (
    <PxSpinners />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-spinners.js"></script>

<px-spinners></px-spinners>
```

## Behaviour

Six loading indicators made of pixels: orbit, snake, helix, scan, rain and pulse. Clicking one finishes it with a check before it starts again.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail               | Description                                                                                                                            |
| -------- | ---------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `finish` | `onFinish` | `{ loader: string }` | Fires when a loader is finished, by click, Finish all or `finish()`. `loader` is `Orbit`, `Snake`, `Helix`, `Scan`, `Rain` or `Pulse`. |

### Methods

Call them on the element, for example through a React ref.

| Method                  | Description                                                                             |
| ----------------------- | --------------------------------------------------------------------------------------- |
| `finish(index: number)` | Shows the check on loader 0 to 5 for 1.6 seconds, then restarts it, and fires `finish`. |

## Accessibility

* The canvas has `role="img"` with an `aria-label` naming all six loaders. It is not focusable and exposes no busy or progress state.
* Finishing a single loader requires a pointer; "Finish all" is a native button.
* Reduced motion: each loader shows a still frame; the finish check still appears.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--foreground`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-fg` and `--ui-muted`.

## Notes

* The loaders are a 3 by 2 gallery on a 216px tall canvas and animate continuously while on screen. They are visual only and carry no progress value.