Spinner

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/spinner.json

npx shadcn@latest add https://prototyper-ui.com/r/spinner.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/spinner.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/spinner.json

This will add the following files to your project:

• components/ui/spinner.tsx

Usage

import { Spinner } from "@/components/ui/spinner";

<Spinner />;

Examples

Sizes

In Button

Styling

Data Slots

Use data-slot attributes to target the spinner in CSS:

Customization Examples

/* Change spinner color */
[data-slot="spinner"] {
  @apply text-primary;
}

{
  /* Custom color via className */
}
<Spinner className="text-primary" size="lg" />;

API Reference

Spinner

An SVG loading spinner with rotation animation.

Extends React.ComponentProps<"svg">. All standard SVG props are forwarded via ...props.

spinnerVariants

A cva helper exported for use outside of the <Spinner> component.

Accessibility

Keyboard Interactions

Spinner is a non-interactive presentational element and does not have keyboard interactions.

ARIA Attributes

• Add role="status" and aria-label="Loading" when the spinner indicates an ongoing operation.
• Use aria-busy="true" on the parent container while loading.

Related