# Loader

A pick-and-place cycle as a loading indicator. Indeterminate on its own; give it a value and the out-tray fills in proportion.

> For the complete index, see [llms.txt](https://robocn.dev/llms.txt). A Markdown version of any page is available by appending `.md` to its URL or by sending an `Accept: text/markdown` header.

## Install

```bash
bunx --bun shadcn@latest add https://robocn.dev/r/robot-loader.json
```

Registry item: `robot-loader` · [`https://robocn.dev/r/robot-loader.json`](https://robocn.dev/r/robot-loader.json)

## Notes

- Front elevation is the drawing it always had. The bed’s depth and the section of the two columns and the beam are what the elevation never had to show, and they appear as the camera comes round.
- The machine is modelled in world units, so a view is only a change of projection. `iso` is its own axonometric, which `spin` and `tilt` steer; the other three are the shared orthographic cameras and ignore both.
- Plan view is the identity projection. The column, the two link decks and the spindle only have heights once the camera comes down off the vertical — the same geometry, not a second drawing.
- Sets `aria-busy` and an `aria-label` that carries the percentage, so it announces as a progress indicator.

## Usage

```tsx
<RobotLoader label="Deploying" />
<RobotLoader value={62} capacity={5} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `cycle` | `number` | `2.6` | Seconds per pick-and-place cycle. |
| `value` | `number` | — | 0–100 fills the out-tray in proportion. Omit for indeterminate. |
| `capacity` | `number` | `4` | Parts in a full tray. |
| `pauseOnHover` | `boolean` | `false` | Stop the cycle while the pointer is over the cell — the one thing anyone wants to do to a loading animation. |
| `label` | `string` | — | Caption under the cell. |
| `variant` | `"solid" | "outline" | "blueprint" | "wire"` | `"solid"` | How the machine is painted. Geometry never changes between variants. |
| `size` | `"xs" | "sm" | "md" | "lg" | "xl" | number` | `"md"` | Rendered width in pixels, or a step on the scale. |
| `color` | `string` | `var(--robot-shell)` | Body panels — the colour the machine reads as. |
| `accent` | `string` | `var(--robot-accent)` | Status colour: tip light, live tool, readouts. |
| `metal` | `string` | `var(--robot-metal)` | Bare machined parts: collars, bolts, tool bodies. |
| `dark` | `string` | `var(--robot-dark)` | Cast joints, base, shadow side. |
| `palette` | `Partial<RobotPalette>` | — | Override any subset of roles at once, including glow and grid. |

## Source

- `src/components/ui/robot-loader.tsx`