BrailleLoader
Animated Braille-pattern spinner — 10 styles for distinct loading contexts.
Preview
⠋
Variants
Braille
⠋
Orbit
⠃
Breathe
⠀
Snake
⣁⡀
Fill Sweep
⣀⣀
Pulse
⠀⠶⠀
Columns
⡀⠀⠀
Checkerboard
⢕⢕⢕
Scan
⠀⠀⠀⠀
Rain
⢁⠂⠔⠈
Cascade
⠀⠀⠀⠀
Sparkle
⡡⠊⢔⠡
Wave Rows
⠖⠉⠉⠑
Helix
⢌⣉⢎⣉
Diagonal Swipe
⠁⠀
Props
| Prop | Type | Description |
|---|---|---|
| name | BrailleSpinnerName | Named spinner style from the built-in registry. Defaults to "braille". |
| spinner | Spinner | Custom spinner object ({ frames, interval }) — overrides `name` when provided. |
| interval | number | Frame duration in milliseconds. Overrides the spinner's own interval when set. |
| paused | boolean | Freezes the animation on the current frame when true. |
| frame | number | Pin a deterministic frame index — useful for SSR snapshots and screenshots. |
| respectReducedMotion | boolean | Freezes animation when the user has enabled the prefers-reduced-motion OS setting. Defaults to true. |
| live | boolean | When true (and aria-label is set), wraps with role="status" and aria-live="polite". Enable for at most one loader per view. |
| aria-label | string | Accessible label. Without it the element is hidden from assistive technology (aria-hidden). |
Usage
import { BrailleLoader } from "@/components/loaders/braille-loader";
// Default braille spinner
<BrailleLoader aria-label="Loading" />
// Named style
<BrailleLoader name="helix" aria-label="Loading" />
// Announce a single status change to screen readers
<BrailleLoader name="orbit" live aria-label="Saving…" />