25 variantszero runtime depsregistry install

Accessible loading states for shadcn/ui.

Braille Loader turns Unicode braille cells into crisp, theme-aware loading animations you can install as editable source and use anywhere your app waits.

Inspired by Braille Animations ⠿ by @gunnargray. Built independently for shadcn/ui by Joe.

Open in Install component Browse variants

Terminal

npx shadcn@latest add https://shadcn-braille-loader.vercel.app/r/braille-loader.json

Variants: 25
Runtime deps: 0
A11y: ARIA

Live loading states

Four production-sized examples

Route changeFast navigation feedback

Chase

Analytics syncSteady background work

Bars

Workspace syncVisible long-running state

Marquee

Search resultsPolished empty-state motion

Helix

Built for shadcn/ui

Install through the registry, own the source, and adapt the component like the rest of your system.

Braille-only motion

Every animation is composed from Unicode braille cells, so the loaders stay crisp at any size.

Accessible defaults

The component ships with role=status, aria-live, aria-label, and decorative cells hidden from assistive tech.

Variant library

Pick a loading rhythm that fits the moment.

Use compact indicators inside controls, expressive loaders in empty states, and slower motion for calm background work.

tsx

<BrailleLoader variant="chase" />
<BrailleLoader variant="bars" />
<BrailleLoader variant="marquee" />
<BrailleLoader variant="helix" />

Breathe

Expanding and contracting from center

Pulse

Diamond-shaped pulse from center

Orbit

Dots orbit around the perimeter

Snake

Snake-like path traversal

Fill Sweep

Horizontal sweep fill effect

Scan

Vertical scan line effect

Rain

Drops moving down staggered columns

Cascade

Diagonal cascade movement

Checkerboard

Classic checkerboard toggle

Columns

Alternating column highlight

Wave Rows

Sine wave across rows

Diagonal Swipe

Diagonal reveal animation

Sparkle

Random sparkle burst pattern

Helix

Double helix orbit pattern

Braille

Classic braille cell fill animation

Reflected Ripple

Mirror ripple wave

Pendulum

Horizontal swing wave pattern

Compress

Compress inward with popping dots

Sort

Sort from random to ordered gradient

Equalizer

Audio bars rising by frequency

Chase

Compact dots chase across the row

Bars

Symmetric bars rise and fall

Marquee

Scrolling diagonal stripe band

Typing

Sequential type-in cursor effect

Spiral

Rotating arms around center

Install

Drop it into your app as editable source.

The registry command adds the loader component and animation helpers to your project. The showcase block is optional when you want the full preview surface.

Core component

npx shadcn@latest add https://shadcn-braille-loader.vercel.app/r/braille-loader.json

Optional showcase block

npx shadcn@latest add https://shadcn-braille-loader.vercel.app/r/braille-loader-showcase.json

Usage

Small API, flexible presentation.

The loader is intentionally plain: choose a variant, tune speed and size, then let your existing color tokens do the rest.

Chase

Bars

Marquee

loading-state.tsx

1 import { BrailleLoader } from "@/components/ui/braille-loader"
2  
3 export function LoadingState() {
4   return (
5     <BrailleLoader
6       variant="helix"
7       speed="normal"
8       label="Loading results"
9     />
10   )
11 }

Customize

Tune motion without rewriting it.

Speeds, type size, and color are all component props or standard classes, so the loader stays easy to compose.

Speed

Use slow, normal, or fast presets.

tsx

<BrailleLoader variant="orbit" speed="slow" />
<BrailleLoader variant="orbit" speed="normal" />
<BrailleLoader variant="orbit" speed="fast" />

Size

Set the braille cell font size directly.

tsx

<BrailleLoader variant="sparkle" fontSize={16} />
<BrailleLoader variant="sparkle" fontSize={28} />
<BrailleLoader variant="sparkle" fontSize={44} />

Color

The cells inherit currentColor.

tsx

<BrailleLoader variant="sparkle" className="text-primary" />
<BrailleLoader variant="helix" className="text-muted-foreground" />
<BrailleLoader variant="rain" className="text-foreground" />

Example

Designed for real loading states.

Put it in buttons, forms, table refresh states, command palettes, and anywhere a small source-owned loader should feel deliberate.

Saving profile

Syncing workspace

Loading analytics

submit-button.tsx

1 import { BrailleLoader } from "@/components/ui/braille-loader"
2 import { Button } from "@/components/ui/button"
3  
4 function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
5   return (
6     <Button disabled={isSubmitting}>
7       {isSubmitting ? (
8         <>
9           <BrailleLoader variant="pulse" className="text-primary-foreground" />
10           Saving
11         </>
12       ) : (
13         "Save changes"
14       )}
15     </Button>
16   )
17 }

API

Component props

Everything needed for production loading states, kept intentionally small.

Prop	Type	Default	Description
variant	string	"breathe"	Animation pattern. One of 25 variants.
speed	"slow" \| "normal" \| "fast"	"normal"	Animation speed preset.
className	string	-	Additional classes for color, layout, and spacing.
label	string	"Loading"	Screen reader label exposed through role=status.
fontSize	number	28	Braille character size in pixels.

Accessibility

Status semantics are included.

Animated braille cells are hidden from screen readers while the wrapper announces a concise loading label.

role=status

Communicates a non-interruptive loading state.

aria-live=polite

Lets assistive tech announce updates calmly.

aria-hidden cells

Keeps decorative animation characters out of the spoken output.

Showcase block

Try the full preview surface.

Install the showcase when you want a ready-made browser for comparing variants, sizes, and speeds.

Open in

Animation Breathe loading
Breathe
Animation Pulse loading
Pulse
Animation Orbit loading
Orbit
Animation Snake loading
Snake
Animation Fill Sweep loading
Fill Sweep
Animation Scan loading
Scan
Animation Rain loading
Rain
Animation Cascade loading
Cascade
Animation Checkerboard loading
Checkerboard
Animation Columns loading
Columns
Animation Wave Rows loading
Wave Rows
Animation Diagonal Swipe loading
Diagonal Swipe
Animation Sparkle loading
Sparkle
Animation Helix loading
Helix
Animation Braille loading
Braille
Animation Reflected Ripple loading
Reflected Ripple
Animation Pendulum loading
Pendulum
Animation Compress loading
Compress
Animation Sort loading
Sort
Animation Equalizer loading
Equalizer
Animation Chase loading
Chase
Animation Bars loading
Bars
Animation Marquee loading
Marquee
Animation Typing loading
Typing
Animation Spiral loading
Spiral

Animation Breathe loading
Breathe
Animation Pulse loading
Pulse
Animation Orbit loading
Orbit
Animation Snake loading
Snake
Animation Fill Sweep loading
Fill Sweep
Animation Scan loading
Scan
Animation Rain loading
Rain
Animation Cascade loading
Cascade
Animation Checkerboard loading
Checkerboard
Animation Columns loading
Columns
Animation Wave Rows loading
Wave Rows
Animation Diagonal Swipe loading
Diagonal Swipe
Animation Sparkle loading
Sparkle
Animation Helix loading
Helix
Animation Braille loading
Braille
Animation Reflected Ripple loading
Reflected Ripple
Animation Pendulum loading
Pendulum
Animation Compress loading
Compress
Animation Sort loading
Sort
Animation Equalizer loading
Equalizer
Animation Chase loading
Chase
Animation Bars loading
Bars
Animation Marquee loading
Marquee
Animation Typing loading
Typing
Animation Spiral loading
Spiral

1	import { BrailleLoader } from "@/components/ui/braille-loader"
2
3	export function LoadingState() {
4	return (
5	<BrailleLoader
6	variant="helix"
7	speed="normal"
8	label="Loading results"
9	/>
10	)
11	}

1	import { BrailleLoader } from "@/components/ui/braille-loader"
2	import { Button } from "@/components/ui/button"
3
4	function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
5	return (
6	<Button disabled={isSubmitting}>
7	{isSubmitting ? (
8	<>
9	<BrailleLoader variant="pulse" className="text-primary-foreground" />
10	Saving
11	</>
12	) : (
13	"Save changes"
14	)}
15	</Button>
16	)
17	}