# PixelLoader

> Grid of pixels pulsing in a diagonal wave as a pre-token loading indicator for AI responses.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: AI Chat
- Tags: ai, reasoning, loading, indicator
- Docs: https://fancy-ui.rama.app/docs/components/pixel-loader
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/pixel-loader

## Import

```svelte
<script lang="ts">
  import { PixelLoader } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { PixelLoader } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `cols` | `number` | `5` | Number of pixel columns |
| `rows` | `number` | `5` | Number of pixel rows |
| `cellSize` | `number` | `6` | Size of a single pixel in px |
| `gap` | `number` | `2` | Space between pixels in px |
| `color` | `string` | `"var(--ft-pixel-color, currentColor)"` | Pixel colour, any CSS colour value |
| `speed` | `number` | `1.6` | Duration of one full pulse cycle in seconds |
| `label` | `string` | `"Loading"` | Accessible label announced by assistive tech |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { PixelLoader } from "fancy-ui-svelte";
</script>

<div
	class="flex w-full flex-col items-center justify-center gap-10 rounded-lg border bg-zinc-950 p-10"
>
	<div class="flex items-center gap-3 text-zinc-400">
		<PixelLoader />
		<span class="text-sm">Thinking…</span>
	</div>

	<PixelLoader cols={8} rows={8} cellSize={8} gap={3} color="#22d3ee" speed={2.2} label="Working" />
</div>
```