Spinner

Loading indicators for inline waits and blocking states.

Installation

npx shadcn@latest add @iconiq/spinner

Default export for a lightweight loading indicator built around an output element.

variant"ring" | "dots"

Default ring

Chooses between the rotating circular border and the three bouncing dots treatment.

classNamestring

Merged onto the root output element so you can resize or recolor the spinner with Tailwind utilities.

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.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.