> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Spinner

> Circular loading indicator.

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "140px", pointerEvents: "none" }}
      title="Spinner"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
body{margin:0;background:#ffffff;display:flex;align-items:center;justify-content:center;height:140px}
.spinner{width:32px;height:32px;border-radius:9999px;border:3px solid #e5e7eb;border-top-color:#111827;animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
</style></head><body>
<div class='spinner'></div>
</body></html>`}
    />
  </div>
</Frame>

* **Location**: `sabo/src/components/ui/spinner.tsx`

## When to use

* Show short, indeterminate loading states for buttons, cards, or page sections.
* Prefer skeletons for full‑content placeholders; use Spinner for small inline waits.

## Usage

```tsx sabo/src/components/ui/spinner.tsx theme={null}
import { Spinner } from "@/components/ui/spinner";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Spinner className="size-4" />
      <span>Loading…</span>
    </div>
  );
}
```

## Key props

<ParamField path="className" type="string">
  Tailwind classes for size or color (e.g., <code>size-4</code>, <code>text-muted-foreground</code>).
</ParamField>

## Styling tip

* Adjust size with Tailwind size utilities (<code>size-3</code>, <code>size-5</code>).
* In a button, align via <code>inline-flex items-center gap-2</code>.

## Accessibility

* Spinner sets <code>role="status"</code> and an <code>aria-label="Loading"</code>.
* Provide adjacent text for context when possible (e.g., “Saving settings…”).
