---
title: Spinner
description: An animated loading spinner component with smooth circular rotation animation and built-in accessibility support
---

```tsx
import { Spinner } from '@/ui/Spinner';

export function SpinnerDemo() {
  return <Spinner className="w-12" />;
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/spinner.json
```

Or manually, copy the following code into `/ui/spinner.tsx`:

```tsx
import type { FunctionComponent } from 'react';

interface SpinnerProps {
  /**
   * className
   */
  className?: string;
}

export const Spinner: FunctionComponent<SpinnerProps> = ({ className }) => {
  return (
    <div className={className} aria-busy="true" role="alert" aria-live="polite">
      <svg className="w-full animate-spin" viewBox="0 0 26 26" fill="none">
        <circle cx="13" cy="13" r="12" stroke="#CCCCCC" strokeWidth="2" />
        <circle
          className="animate-loaderDash origin-center"
          cx="13"
          cy="13"
          r="12"
          stroke="black"
          strokeWidth="2"
          strokeDasharray="38"
          strokeDashoffset="38"
          strokeLinecap="round"
        />
      </svg>
    </div>
  );
};
```

## Usage

```tsx showLineNumbers
import { Spinner } from '@/docs/lib/ui/spinner';

export function Component() {
  return <Spinner className="w-12 h-12" />;
}
```

## API Reference

### Spinner

| Prop        | Type     | Default     | Description                                                                 |
| ----------- | -------- | ----------- | --------------------------------------------------------------------------- |
| `className` | `string` | `undefined` | Optional CSS classes to apply to the spinner container for sizing and style |

## Notes

- **Accessibility**: The Spinner includes built-in ARIA attributes (`aria-busy="true"`, `role="alert"`, `aria-live="polite"`) to announce loading states to screen readers
- **Animation**: Features two animations working together - a rotating SVG spinner and an animated stroke dasharray for smooth visual feedback
- **Sizing**: Control the spinner size using the `className` prop with Tailwind width/height utilities (e.g., `w-8`, `w-12`, `w-16`)
- **SVG-Based**: Renders as an SVG element that scales cleanly at any size without pixelation
- **Color Customization**: The spinner uses a gray background circle (`#CCCCCC`) and black animated stroke. Colors can be customized via CSS by targeting the SVG circles
- **Loading States**: Best used in combination with conditional rendering to show/hide based on loading state