---
url: /api/css/spinner.md
---
# CSS: spinner

`.instui-spinner` — An animated loading ring or AI spinner; give it role="status" and an aria-label.

`-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color. The AI variants replace the ring with the centred `ai-spinner` glyph while keeping the same size scale.

**Source:** [spinner.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/components/spinner/spinner.css)

## Accessibility

Give the spinner role="status" and an aria-label so screen readers announce it as a live loading status.

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/spinner.css";
```

## Demo

```demo
self:spinner
```

## Examples

```html
<span class="instui-spinner" role="status" aria-label="Loading"></span>
```

### Inverse color -nocard

```html
<div class="instui-view instui-card -background-primary-inverse">
  <span class="instui-spinner -color-inverse" role="status" aria-label="Loading"></span>
</div>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-color-ai` | Rotating AI-gradient star. |
| `.-color-ai-on-color` | Rotating on-colour AI star for a coloured or dark surface. |
| `.-color-inverse` | On a dark surface. |
| `.-size-large` | Large. Long-form alias of `-size-lg`. |
| `.-size-lg` | Large. |
| `.-size-sm` | Small. |
| `.-size-small` | Small. Long-form alias of `-size-sm`. |
| `.-size-x-small` | Extra-small. Long-form alias of `-size-xs`. |
| `.-size-xs` | Extra-small. |

## Animations

| Animation | Description |
| --- | --- |
| `pantoken-spinner-rotate` | Rotates the ring, or the AI star at the slower 2.25-second cadence. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-color-icon-on-color` | `<color>` | `#ffffff` |
| `--instui-color-stroke-ai-bottom-gradient` | `<color>` | `light-dark(#00828E, #04A4B7)` |
| `--instui-color-stroke-ai-top-gradient` | `<color>` | `light-dark(#9E58BD, #B680CC)` |
| `--instui-component-spinner-color` | `<color>` | `light-dark(#2369A4, #7FB4F1)` |
| `--instui-component-spinner-inverse-color` | `<color>` | `#ffffff` |
| `--instui-component-spinner-spinner-size-lg` | `<length>` | `4.5rem` |
| `--instui-component-spinner-spinner-size-md` | `<length>` | `3.5rem` |
| `--instui-component-spinner-spinner-size-sm` | `<length>` | `2rem` |
| `--instui-component-spinner-spinner-size-xs` | `<length>` | `1rem` |
| `--instui-component-spinner-stroke-width-lg` | `<length>` | `0.75em` |
| `--instui-component-spinner-stroke-width-md` | `<length>` | `0.5em` |
| `--instui-component-spinner-stroke-width-sm` | `<length>` | `0.375em` |
| `--instui-component-spinner-stroke-width-xs` | `<length>` | `0.25em` |
| `--instui-component-spinner-track-color` | `<color>` | `light-dark(rgba(35,68,101,0.1), rgba(255,255,255,0.1))` |
| `--instui-icon-ai-spinner` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M11.0621%202.53451C11.3843%201.66389%2012.6157%201.66389%2012.9379%202.53451L15.0815%208.32767C15.1828%208.60139%2015.3986%208.8172%2015.6723%208.91848L21.4655%2011.0621C22.3361%2011.3843%2022.3361%2012.6157%2021.4655%2012.9379L15.6723%2015.0815C15.3986%2015.1828%2015.1828%2015.3986%2015.0815%2015.6723L12.9379%2021.4655C12.6157%2022.3361%2011.3843%2022.3361%2011.0621%2021.4655L8.91849%2015.6723C8.8172%2015.3986%208.60139%2015.1828%208.32767%2015.0815L2.53451%2012.9379C1.66389%2012.6157%201.66389%2011.3843%202.53451%2011.0621L8.32767%208.91849C8.60139%208.8172%208.8172%208.60139%208.91848%208.32767L11.0621%202.53451Z%22%2F%3E%3C%2Fsvg%3E')` |