Spinners

Spinners

Spinners are loading indicators. Use .spinner-border for a rotating border spinner, or .spinner-grow for a growing spinner.

Border spinner

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

Colored spinners

Add .text-{color} to change the spinner color:

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-success"></div>

Growing spinner

<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>

Sizing

Use .spinner-border-sm or .spinner-grow-sm for smaller spinners. For custom sizes, use width and height styles.

Buttons with spinners

Spinners are often used inside buttons to show a loading state:

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading...
</button>

TL;DR

• .spinner-border makes a border spinner.
• .spinner-grow makes a growing spinner.
• .text-{color} changes the color.
• .spinner-border-sm makes it smaller.
• Spinners work well inside buttons for loading states.