---
title: "Spinner"
description: "An indicator that shows a loading state. Any icon can spin, or use a pure-CSS ring when there is no icon to hand."
url: "https://susonwaiba.github.io/htmx-ui/docs/v0.1/components/spinner"
section: "Components"
---
# Spinner
An indicator that shows a loading state. Any icon can spin, or use a pure-CSS ring when there is no icon to hand.
```html
```
## Usage
Add `.spinner` to an SVG icon and it spins. The `spinner()` macro inlines an icon from `icons/` with the class and accessibility attributes set: `role="status"` and an `aria-label` of "Loading".
```html
```
## Custom icon
Pass any icon name to the macro, or put `.spinner` on your own SVG.
```html
```
## Without an icon
On any element other than an SVG, `.spinner` draws a ring with CSS. Use it in markup that can't inline icons, such as HTML fragments built by your server.
```html
```
## Sizes
Use `.spinner-sm` (12px), the default (16px), `.spinner-lg` (24px) and `.spinner-xl` (32px), or any `size-*` utility.
```html
```
## Colour
Spinners use the current text colour, so `text-*` utilities recolour them.
```html
```
## In a button
Inside a `.btn`, the spinner takes the button's icon size. When the button text already says what's happening, pass `label=none` so the spinner is hidden from screen readers. `aria-busy="true"` makes the button ignore clicks without fading it like `disabled` does.
```html
```
## In a badge
```html
Syncing Deploying Updating
```
## In a button group
```html
```
## In an input group
```html
```
## With htmx requests
Add `.htmx-indicator` to show a spinner only while a request runs. Inside a button, badge or input-group addon it takes no space until then. Add `.htmx-indicator-hide` to an icon to swap it for the spinner.
```html
```
> The `/api/slow` endpoint is a mock that only exists under `bun run dev`.
## Reference
| Class | Description |
| --- | --- |
| `.spinner` | Spins an SVG icon. On any other element, draws a CSS ring. |
| `.spinner-sm / -lg / -xl` | 12px, 24px or 32px instead of 16px. |
| `.htmx-indicator-hide` | Hidden while the htmx request it's inside runs. |
| Macro | Description |
| --- | --- |
| `spinner(icon="loader", class="", label="Loading", id=none)` | Inlines icons/.svg as a spinner. label=none hides it from assistive technology. |