Spinner Component
Loading indicator with infinite clockwise rotation. Uses CSS conic-gradient and mask for the spinning arc.
Notes
- Base:
.spinner. Default size is 24px (spinner-6).
- Sizes:
spinner-1 (4px) to spinner-15 (60px). Border width increases with size.
- Variants:
spinner-gapped (gap in the arc), spinner-broken (broken arc segment).
- Color:
spinner-* dynamic utilities (e.g. spinner-primary, spinner-success).
Default
Sizes
4px (spinner-1)
8px (spinner-2)
12px (spinner-3)
16px (spinner-4)
20px (spinner-5)
24px (spinner-6, default)
28px (spinner-7)
32px (spinner-8)
36px (spinner-9)
40px (spinner-10)
44px (spinner-11)
48px (spinner-12)
52px (spinner-13)
56px (spinner-14)
60px (spinner-15)
Theme colors
Primary
Secondary
Tertiary
Success
Error
Info
Highlight
Warning
Caution
Ink
Title
Description
Caption
Placeholder
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Use cases
Inline with text
Saving...
Button loading
For skeleton-style loading placeholders, see demo-skeleton.html.