# Circular spinner

> The classic ring spinner, with color, size and speed you can tune to fit a button or a whole page.

- Category: [Loaders](https://library.aimran.es/components/loaders)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/spinner
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

Sometimes the plain loading spinner is exactly right: inside a “Send” button while a contact form submits, next to a search field waiting for results or in the middle of an empty table. People know what it means before they even think about it, and it takes up almost no space.

Match the color to your brand and keep it small inside buttons, around 16 to 20 pixels. If the wait usually goes past three or four seconds, a progress bar or a skeleton tells people more about what is coming.

## Code

### React (Motion)

```tsx
interface SpinnerProps {
  color?: string;
  size?: number;
  /** Segundos por vuelta. */
  speed?: number;
}

export default function Spinner({
  color = "#0071e3",
  size = 48,
  speed = 1,
}: SpinnerProps) {
  return (
    <div
      role="status"
      aria-label="Loading"
      className="animate-spin rounded-full border-transparent"
      style={{
        width: size,
        height: size,
        borderWidth: Math.max(2, size / 10),
        borderColor: `${color}33`,
        borderTopColor: color,
        animationDuration: `${speed}s`,
      }}
    />
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Circular spinner” block (Loaders) from AIMRAN Library to my project.

## What it is
The classic ring spinner, with color, size and speed you can tune to fit a button or a whole page.

## Chosen settings
- Color: #0071e3
- Size: 48px (from 16 to 96px)
- Speed: 1s (from 0.4 to 3s)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
interface SpinnerProps {
  color?: string;
  size?: number;
  /** Segundos por vuelta. */
  speed?: number;
}

export default function Spinner({
  color = "#0071e3",
  size = 48,
  speed = 1,
}: SpinnerProps) {
  return (
    <div
      role="status"
      aria-label="Loading"
      className="animate-spin rounded-full border-transparent"
      style={{
        width: size,
        height: size,
        borderWidth: Math.max(2, size / 10),
        borderColor: `${color}33`,
        borderTopColor: color,
        animationDuration: `${speed}s`,
      }}
    />
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````