Every stall deserves a kinder signal —one tireless lap,orthree staggered taps— calm motion that still reads.
Installation
npx shadcn@latest add @iconiq/spinnerProps
Spinner
2 props
Default export for a lightweight loading indicator built around an output element.
variant
"ring" | "dots"Default
ringChooses between the rotating circular border and the three bouncing dots treatment.
className
stringMerged onto the root output element so you can resize or recolor the spinner with Tailwind utilities.
Notes
The ring variant uses motion.create('output'), while the dots variant renders a plain output element with animated child spans.
Both variants ship with aria-label="Loading" and aria-live="polite". The component does not currently accept a custom accessible label prop.
No additional DOM props are forwarded beyond className, so wrap the component if you need extra data attributes or inline event handlers.