AI Chat Fancy Stable
PixelLoader
Grid of pixels pulsing in a diagonal wave as a pre-token loading indicator for AI responses
Preview
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>Installation
pnpm add fancy-ui-svelte
import { PixelLoader } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { PixelLoader } from 'fancy-ui-svelte';
</script>
<PixelLoader />Examples
Basic Usage
svelte
<script lang="ts">
import { PixelLoader } from "$lib/fancy-ui/pixel-loader";
</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>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 |
Links
Related components
Ch
ChatError
Quiet inline failure banner for a chat turn: the error, an optional detail line, and a retry button that disables itself while the retry is in flight
AI Chat Stable
Ch
ChatMessage
One conversation turn, aligned and dressed by its role, streaming its body while the answer arrives, with an action rail that fades in on hover and a version navigator underneath
AI Chat Stable
Ch
ChatPanel
The shell a conversation lives in: a sticky header, a transcript that pins itself to the bottom while an answer arrives and offers the way back once you scroll up, and a sticky composer row
AI Chat Stable