---
title: Spinner
summary: 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.
description: Show loading states with spinners. Choose between border and growing styles, change colors and sizes, or place them in buttons.
related: [/ui/components/progress, /ui/components/placeholder]
source: core/scss/ui/_loaders.scss
css-vars: spinner
classnames:
  component:
    - class: spinner-border
      desc: Rotating ring
    - class: spinner-grow
      desc: Pulsing dot, a quieter alternative
  color:
    - class: text-{color}
      desc: Any base color, for example text-primary
  size:
    - class: spinner-border-sm
      desc: Small ring
    - class: spinner-grow-sm
      desc: Small dot
---
import Example from '@components/Example.astro';

## Default markup

The default spinner shows that an action is in progress.

<Example centered>
<div class="spinner-border"></div>
</Example>


## Colors

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

<Example centered>
<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>
</Example>

## Size

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

<Example centered>
<div class="spinner-border" role="status"></div>
<div class="spinner-border spinner-border-sm" role="status"></div>
</Example>

## Growing spinner

The growing spinner pulses instead of rotating.

<Example centered>
<div class="spinner-grow" role="status"></div>
</Example>

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

<Example centered>
<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>
</Example>

## 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.

<Example centered>
<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>
</Example>

## Animated dots

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

<Example centered>
<h1>Loading <span class="animated-dots"></span></h1>
</Example>

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

<Example centered>
<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>
</Example>

## 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.