---
title: "Spinner"
description: "A spinning circle for a wait of unknown length, announced to screen readers as \"Loading…\" or its label. It turns only for people who allow motion."
---

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

# Spinner

## Inline

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

<p className="text-muted-foreground flex items-center gap-2 text-sm">
  <Spinner />
  Refreshing the contact list
</p>
```

## Sizes

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

<div className="flex items-center gap-4">
  <Spinner size="sm" />
  <Spinner />
  <Spinner className="text-primary" label="Loading the campaign report" size="lg" />
</div>
```

## Source

The examples above are [`src/components/spinner/spinner.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/spinner/spinner.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/spinner/index.mdx