Radial Dots Spinner
An animated dotted spinner with radial spokes and center rings.
Tint it with text-* utilities and control density/size/speed via props.
Examples
Basic
Slow blue
Compact
Installation
npx shadcn-extras@latest add radial-dots-spinner
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 160 | Square size in px |
| spokes | number | 12 | Number of rays |
| dotsPerSpoke | number | 10 | Dots per ray |
| innerRadius | number | 14 | Start radius of rays |
| outerRadius | number | size/2-6 | End radius |
| dotRadius | number | 3.5 | Dot size or taper |
| centerRings | number | 2 | Dotted rings around center |
| centerRingRadius | number | 10 | Radius of first ring |
| centerRingGap | number | 6 | Gap between rings |
| centerRingDots | number | 16 | Dots per center ring |
| speed | number | 1.6 | Seconds per rotation (set 0 to disable spin) |
| className | string | Wrapper classes (use for color via text-*) | |
| dotClassName | string | Extra class for each dot | |
| label | string | Loading… | aria-label |