Spinner

Stable

High-velocity orbital loading spinners featuring concentric halo pulses, scanner heads, and uppercase monospace status labels.

Installation

$pnpm add @siberui/react

Import

tsx

import { Spinner } from '@siberui/react';

Basic Usage & Status Labels

Pair with showLabel and label to provide real-time textual feedback alongside the spinning loader.

INITIALIZING QUANTUM CORE...

tsx

<div className="flex items-center justify-center gap-12">
  <Spinner variant="neon" size="lg" showLabel label="INITIALIZING QUANTUM CORE..." />
</div>

Cyberpunk Signal Variants (Neon, Purple, Rose)

Neon variants feature an animated concentric expanding radar ping that pulses outward with the spinner head.

IDLE STREAM

DECRYPTING

LATTICE SYNC

PURGING LOGS

tsx

<div className="grid grid-cols-2 md:grid-cols-4 gap-6 w-full">
  <div className="flex flex-col items-center p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <Spinner variant="default" size="lg" showLabel label="IDLE STREAM" />
  </div>

  <div className="flex flex-col items-center p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <Spinner variant="neon" size="lg" showLabel label="DECRYPTING" />
  </div>

  <div className="flex flex-col items-center p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <Spinner variant="neonPurple" size="lg" showLabel label="LATTICE SYNC" />
  </div>

  <div className="flex flex-col items-center p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <Spinner variant="destructive" size="lg" showLabel label="PURGING LOGS" />
  </div>
</div>

Scale & Dimensions (sm, md, lg, xl)

Scale dimensions across sm (16px), md (24px), lg (32px), and xl (48px).

SM (16px)

MD (24px)

LG (32px)

XL (48px)

tsx

<div className="flex items-end justify-center gap-10">
  <div className="flex flex-col items-center gap-2">
    <Spinner size="sm" variant="neon" />
    <span className="text-[10px] font-mono text-slate-500">SM (16px)</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <Spinner size="md" variant="neon" />
    <span className="text-[10px] font-mono text-slate-500">MD (24px)</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <Spinner size="lg" variant="neon" />
    <span className="text-[10px] font-mono text-slate-500">LG (32px)</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <Spinner size="xl" variant="neon" />
    <span className="text-[10px] font-mono text-slate-500">XL (48px)</span>
  </div>
</div>

Frosted Cyber-Glass Decryption Panel

Embed pulsing loaders inside acrylic cards overlaid on circuit substrate grids.

RESOLVING SATELLITE HANDSHAKE

Authenticating orbital transponder signature...

CONNECTING

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col items-center justify-center min-h-[260px] text-center">
  <div className="relative z-10 space-y-4 flex flex-col items-center">
    <Spinner size="xl" variant="neon" />
    <div className="space-y-1">
      <h4 className="text-sm font-mono font-bold text-white tracking-wider">RESOLVING SATELLITE HANDSHAKE</h4>
      <p className="text-xs text-slate-400">Authenticating orbital transponder signature...</p>
    </div>
    <Badge variant="glass" dot dotColor="cyan">CONNECTING</Badge>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Sync Card

Composite dashboard card featuring inline button spinners and state sync indicators.

CLUSTER SYNCHRONIZATION

SYNCING

Replicating distributed database journals to edge replicas.

REPLICATING WAL LOGS (84/100)...

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">CLUSTER SYNCHRONIZATION</CardTitle>
      <Badge variant="neon" size="sm">SYNCING</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Replicating distributed database journals to edge replicas.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 flex flex-col items-center gap-6">
    <Spinner size="lg" variant="neon" showLabel label="REPLICATING WAL LOGS (84/100)..." />

    <div className="flex w-full justify-end gap-3 pt-2">
      <Button variant="secondary" size="sm">ABORT</Button>
      <Button variant="neon" size="sm" glow disabled className="gap-2">
        <Spinner size="sm" variant="neon" />
        SYNCING
      </Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (4)← swipe to inspect →

Property	Description	Type	Default
size	Physical dimension of the spinner glyph.	"sm" \| "md" \| "lg" \| "xl"	"md"
variant	Color theme and radar halo ping style.	"default" \| "neon" \| "neonPurple" \| "destructive"	"default"
label	Screen reader announcement text and visible label string.	string	"Loading..."
showLabel	When true, renders the label text beneath the spinner glyph in monospace uppercase.	boolean	false

Accessibility

ARIA Role Status: The spinner wrapper attaches role="status" with an accessible <span className="sr-only"> containing the label text.

Best Practices

Inline Actions: For buttons during async submit, use size="sm" placed directly to the left of the button label.
Page-Level Loading: For full screen or card view loaders, use size="xl" combined with showLabel.