# Spinner

> Loading indicator. Respects `prefers-reduced-motion`.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/spinner

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { Spinner } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { Spinner } from "@sisyphos-ui/react";

export const Loading = () => <Spinner size="md" color="primary" />;
```

### Vue 3+

```vue
<script setup lang="ts">
import { Spinner } from "@sisyphos-ui/vue";
</script>

<template>
  <Spinner size="md" color="primary" />
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { Spinner } from "@sisyphos-ui/angular";

@Component({
  selector: "app-loading",
  standalone: true,
  imports: [Spinner],
  template: `<sui-spinner size="md" color="primary" />`,
})
export class LoadingComponent {}
```

## Examples

### Colors

```tsx
import { Spinner } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex items-center gap-6">
      <Spinner />
      <Spinner color="success" />
      <Spinner color="error" />
      <Spinner color="warning" />
      <Spinner color="info" />
    </div>
  );
}
```

### Sizes

```tsx
import { Spinner } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex items-center gap-6">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </div>
  );
}
```

### Variants & thickness

Pick between `ring`/`double` styles, tune stroke weight with `thickness`, and pass a `label` for screen readers.

```tsx
import { Spinner } from "@sisyphos-ui/react";

export function Example() {
  return (
    <>
      <Spinner variant="ring" />
      <Spinner variant="double" />
      <Spinner thickness={5} />
      <Spinner label="Saving changes…" />
    </>
  );
}
```

<!-- exports: { "Spinner": "@sisyphos-ui/react" } -->