Loading...
Loading...
> Authentic terminal loading animation using Braille dots.
1import { TerminalSpinner } from "@/components/ui/terminal-spinner"
1<TerminalSpinner />2<TerminalSpinner label="Loading..." />
1<TerminalSpinner />
1<TerminalSpinner size="sm" />
1<TerminalSpinner size="lg" />
1<TerminalSpinner label="Fetching data..." />
1<TerminalSpinner speed={120} label="Processing..." />
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Size of the spinner (sm=14px, md=24px, lg=36px). |
| label | string | - | Optional loading label displayed next to spinner. |
| speed | number | 80 | Animation speed in milliseconds per frame. |
| className | string | - | Additional CSS classes for the container. |
The spinner uses Unicode Braille characters for an authentic terminal look:
const SPINNER_FRAMES = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
8 frames at 80ms = smooth 640ms cycle
<Button disabled={isLoading}>
{isLoading ? (
<TerminalSpinner size="sm" />
) : (
'> SUBMIT'
)}
</Button><div className="flex h-screen items-center justify-center"> <TerminalSpinner size="lg" label="[INIT] Loading system..." /> </div>