Spinner

Loading indicator supporting circular spin, pulsing wave dots, Claude-style cycling glyphs, and animated typing ellipsis.

// Plain markup
import { Spinner } from "@shavin/ui";

All Spinner Variants

✻

Component Source

// Circular dual-layer track ring
<Spinner variant="spin" />

// Pulsing wave dots
<Spinner variant="dots" />

// Claude-style star & flower glyphs
<Spinner variant="glyph" />

// Typography 3-dot typing ellipsis
<Spinner variant="ellipsis" />

Circular Ring (variant="spin")

Component Source

// High-contrast dual-layer track ring (25% track + 90% spinning arc)
<Spinner variant="spin" size="sm" />
<Spinner variant="spin" size="md" />
<Spinner variant="spin" size="lg" />

Wave Dots (variant="dots")

Assistant is typing

Component Source

// Pulsing wave dots for AI chat typing indicators & inline messages
<Spinner variant="dots" size="sm" />
<Spinner variant="dots" size="md" />
<Spinner variant="dots" size="lg" />

<Card className="p-3">
  <Flex gap="2" align="center">
    <Text size="xs" color="muted">Assistant is typing</Text>
    <Spinner variant="dots" size="sm" className="text-accent-contrast" />
  </Flex>
</Card>

Glyphs (variant="glyph")

✻✻✻

✻

Claude thinking

✦

Custom array ( ✦ , ✧, ★, ☆)

Spelunking

Component Source

// Default cycling glyphs: ["✻", "✽", "✶", "✳", "✢"]
<Spinner variant="glyph" size="sm" />
<Spinner variant="glyph" size="md" />
<Spinner variant="glyph" size="lg" />

// Custom array of glyphs & interval
<Spinner variant="glyph" glyphs={["✦", "✧", "★", "☆"]} intervalMs={150} className="text-accent-contrast" />
<Spinner variant="glyph" glyphs={["Spelunking", "Discombobulating", "Marinating", "Concocting", "Percolating", "Schlepping"]} intervalMs={400} className="text-accent-contrast" />

Typography Ellipsis (variant="ellipsis")

Generating response.

Loading workspace.

Component Source

// Pure text 3-dot typing animation that inherits parent/sibling typography styling
<Text size="sm" weight="medium">
  Generating response<Spinner variant="ellipsis" />
</Text>

<Heading size="lg" className="text-accent-contrast">
  Loading workspace<Spinner variant="ellipsis" />
</Heading>

Sizes

Component Source

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Colors & Contexts

text-fg-subtle (default)

text-danger

Component Source

<Text color="subtle" className="flex items-center gap-2">
  <Spinner size="sm" />
  text-fg-subtle (default)
</Text>

<Text color="danger" className="flex items-center gap-2">
  <Spinner size="sm" />
  text-danger
</Text>

<Button size="sm">
  <Spinner size="sm" />
  Saving…
</Button>

Props

Prop	Type	Default	Description
glyphs	string[]	[	Custom array of glyphs for variant="glyph". Default ["✻", "✽", "✶", "✳", "✢"]
intervalMs	number	200	Animation cycle interval in ms for variant="glyph" or variant="ellipsis". Default 200
variant	"spin" \| "dots" \| "glyph" \| "ellipsis"	"spin"	—
size	"sm" \| "md" \| "lg"	"md"	—