Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Spinner
description: An animated loading indicator.
---

```astro live props={{ name: 'spinner' }}
---
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
---

<div class="flex flex-col items-center gap-6">
  <Spinner />
  <Button size="sm" variant="outline" disabled>
    <Spinner class="mr-2 size-4" />
    Loading...
  </Button>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/spinner
```

## Usage

```ts
import { Spinner } from "@/components/ui/spinner"
```

```astro
<Spinner />
```

## Notes

- `Spinner` works well as a standalone loading indicator or inline inside a
  `Button`.
- When it is purely decorative next to visible loading text, the button text can
  carry the main status message.

## Example

```astro
<div class="flex items-center gap-2 text-sm">
  <Spinner />
  <span>Loading results...</span>
</div>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/spinner) for more information on props.