# Spinner

> A spinner is used to show the loading state of a component or page. It provides feedback for an action that takes longer to complete.

Show loading states with spinners. Choose between border and growing styles, change colors and sizes, or place them in buttons.

Source: https://docs.tabler.io/ui/components/spinner

---

## Default markup

The default spinner shows that an action is in progress.

```html
<div class="spinner-border"></div>
```

## Colors

Set the color with a `text-*` class from the [color palette](/ui/base/colors).

```html
<div class="spinner-border text-blue" role="status"></div>
<div class="spinner-border text-azure" role="status"></div>
<div class="spinner-border text-indigo" role="status"></div>
<div class="spinner-border text-purple" role="status"></div>
<div class="spinner-border text-pink" role="status"></div>
<div class="spinner-border text-red" role="status"></div>
<div class="spinner-border text-orange" role="status"></div>
<div class="spinner-border text-yellow" role="status"></div>
<div class="spinner-border text-lime" role="status"></div>
<div class="spinner-border text-green" role="status"></div>
<div class="spinner-border text-teal" role="status"></div>
<div class="spinner-border text-cyan" role="status"></div>
```

## Size

Add `spinner-border-sm` for a smaller spinner.

```html
<div class="spinner-border" role="status"></div>
<div class="spinner-border spinner-border-sm" role="status"></div>
```

## Growing spinner

The growing spinner pulses instead of rotating.

```html
<div class="spinner-grow" role="status"></div>
```

It takes the same `text-*` color classes.

```html
<div class="spinner-grow text-blue" role="status"></div>
<div class="spinner-grow text-azure" role="status"></div>
<div class="spinner-grow text-indigo" role="status"></div>
<div class="spinner-grow text-purple" role="status"></div>
<div class="spinner-grow text-pink" role="status"></div>
<div class="spinner-grow text-red" role="status"></div>
<div class="spinner-grow text-orange" role="status"></div>
<div class="spinner-grow text-yellow" role="status"></div>
<div class="spinner-grow text-lime" role="status"></div>
<div class="spinner-grow text-green" role="status"></div>
<div class="spinner-grow text-teal" role="status"></div>
<div class="spinner-grow text-cyan" role="status"></div>
```

## Button with spinner

Put a spinner inside a [button](/ui/components/button) while its action runs, and disable the button so it can't be clicked twice.

```html
<div class="btn-list">
  <a href="#" class="btn btn-primary">
    <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
  </a>
  <a href="#" class="btn btn-danger">
    <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
  </a>
  <a href="#" class="btn btn-warning">
    <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
  </a>
  <a href="#" class="btn btn-success">
    <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
  </a>
  <a href="#" class="btn">
    <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
  </a>
</div>
```

## Animated dots

Animated dots are a lighter loading indicator for inline text. Add the `.animated-dots` class to a `span`.

```html
<h1>Loading <span class="animated-dots"></span>
</h1>
```

Animated dots also fit inside a button while its action runs.

```html
<div class="btn-list">
  <a href="#" class="btn btn-primary"> Loading <span class="animated-dots"></span>
  </a>
  <a href="#" class="btn btn-primary disabled"> Loading <span class="animated-dots"></span>
  </a>
</div>
```

## Accessibility

- A spinner on its own says nothing. Add `role="status"` and a `visually-hidden` label such as "Loading", so the wait is announced.
- Put the spinner where the content will appear, and set `aria-busy="true"` on that container while it loads.
- Do not use a spinner for something that takes under a second. It flashes, which is more distracting than no feedback at all.
- For a wait with a known length use a [progress bar](/ui/components/progress) instead - it tells users how much is left.

## SCSS variables

Use these SCSS variables to customize spinners. The default values are:

```scss
$spinner-width: 1.5rem;
$spinner-height: 1.5rem;
$spinner-vertical-align: -0.125em;
$spinner-border-width: 2px;
$spinner-animation-speed: 0.75s;

$spinner-width-sm: 1rem;
$spinner-height-sm: 1rem;
$spinner-border-width-sm: 1px;
```

_Source: `core/scss/_variables.scss`_