Concentric Rings Spinner
A dotted, rotating loader composed of multiple rings.
Use Tailwind’s text-* to color; tweak ring count, density, gap, radius taper, speed, and direction.
Examples
Basic
Dense
Perspective (outer fade + taper)
Installation
npx shadcn-extras@latest add concentric-rings-spinner
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 200 | Square size |
| rings | number | 12 | Number of rings |
| dotsPerRing | number | 36 | Dots per ring |
| innerRadius | number | 10 | Radius of first ring |
| ringGap | number | 8 | Gap between rings |
| dotRadius | number | 4 | Dot size or taper from inner → outer |
| speed | number | 2 | Seconds per revolution (middle ring) |
| direction | 1 | -1 | 1 |
| alternate | boolean | true | Alternate direction every ring |
| fadeCenter | number | 0.15 | Fade around middle |
| fadeEdge | number | 0.35 | Fade outer edge |
| pulse | boolean | true | Subtle per‑dot opacity pulsing |
| className | string | Wrapper classes (use for color via text-*) | |
| dotClassName | string | Extra class applied to each dot | |
| label | string | Loading… | aria-label |