Spinner

Stable

A glowing, animated loading indicator.

Examples

Basic Usage

Loading...
tsx
<Spinner />

Variants & Labels

Loading
Loading
Decrypting
Decrypting
Syncing
Syncing
Purging
Purging
tsx
<div className="flex gap-8">
  <Spinner variant="default" showLabel label="Loading" />
  <Spinner variant="neon" showLabel label="Decrypting" />
  <Spinner variant="neonPurple" showLabel label="Syncing" />
  <Spinner variant="destructive" showLabel label="Purging" />
</div>

Sizes

Loading...
Loading...
Loading...
Loading...
tsx
<div className="flex gap-4 items-end">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</div>

API Reference

PropertyDescriptionTypeDefault
sizeSize of the spinner."sm" | "md" | "lg" | "xl""md"
variantColor and glow variant."default" | "neon" | "neonPurple" | "destructive""default"
labelAccessibility label text.string"Loading..."
showLabelVisually render the label text below the spinner.booleanfalse