tabler/docs/components/spinners.mdx

---
title: Spinners
description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
bootstrapLink: components/spinners/
---

## Default markup

Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.

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

## Colors

Choose one of the available colors to customize the spinner and make it suit your design.

```html example centered separated
<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>
```

```html
<div class="spinner-border text-blue" role="status"></div>
<div class="spinner-border text-red" role="status"></div>
```

## Size

Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.

```html example code centered separated
<div class="spinner-border" role="status"></div>
<div class="spinner-border spinner-border-sm" role="status"></div>
```

## Growing spinner

Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.

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

Growing spinners also come in a variety of colors to choose from.

```html example centered separated
<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>
```

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

### Button with spinner

Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.

```html example centered separated code
<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>
```

## Animated dots

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

```html example centered code separated
<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>
```