Loading Orb
Matrix pixel grid loader with Tailwind color support, spring motion presets, and assistant status cards.
9.3 KB
•Updated on September 12, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-orb-loadingUsage
Code
import { LoadingOrb, BuildingLoader } from '@/components/orb/loading'
export default function App() {
return (
<div className="flex flex-col items-center gap-6">
{/* Standard loader cycling states with Tailwind color */}
<LoadingOrb className="text-primary" size={56} />
{/* Specific pattern locked */}
<LoadingOrb pattern="diamond" className="text-emerald-500" size={48} />
{/* Companion assistant status card */}
<BuildingLoader state="Building" detail="Composing response from context" className="text-foreground" />
</div>
)
}Features
All States Overview
All 6 geometric matrix patterns (diamond, corners, bands, scatter, diagonal, glyph) displayed simultaneously on a single line:
Tailwind Colors
Style with standard Tailwind text or background utilities (text-primary, text-emerald-500, text-indigo-500, etc.). Tonal depth is automatically calculated across opacities:
Assistant Status Banner
Agentic workflow status card with reactive states and real-time shimmer progress:
API Reference
LoadingOrb
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 56 | Pixel size of the 4x4 matrix container |
speed | number | 750 | Interval in milliseconds between pattern steps |
pattern | diamond|corners|bands|scatter|diagonal|glyph|number | - | Specific pattern to display, or omitted to auto-cycle |
motionPreset | morph|fade|scale|blur|flip | morph | Spring animation curve applied on cell transitions |
className | string | — | Tailwind classes (e.g. text-foreground, text-primary, text-emerald-500) |
dotClassName | string | bg-current | Custom Tailwind utility applied to every cell |
radius | number | 3 | Border radius in pixels for each matrix dot |
gap | number | 3 | Spacing between dots in pixels |
showGhost | boolean | false | When true, renders inactive dots with subtle ghost opacity |
BuildingLoader
| Prop | Type | Default | Description |
|---|---|---|---|
state | string | Building | Primary state label (e.g. "Building", "Thinking", "Searching") |
detail | string | Composing response from context | Secondary explanatory caption |
showShimmer | boolean | true | Whether to display the bottom shimmer progress bar |
size | number | 38 | Size of the embedded LoadingOrb |
pattern | diamond|corners|bands|scatter|diagonal|glyph|number | - | Specific pattern for the embedded orb |
className | string | — | Classes for the container card |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.