Spinners

About #

Spinners can be used to show loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. Their appearance, alignment, and sizing can be easily customized with our utility classes.

Border spinners #

Create border spinners using .spinner-border. The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-body-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-body-tertiary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Growing spinners #

As an alternative to border spinners, you can also create growing spinners using .spinner-grow. Once again, the color can be changed using text color utilities.

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-body-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-body-tertiary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Margin and placement #

You can use spacing, flexbox, text alignment, or even float utilities to pad and place spinners in different ways. Some common patterns are shown below.

<!-- Margin, and placement using text alignment -->
<div class="text-center">
  <div class="spinner-border text-primary mt-3 mb-2" role="status" aria-hidden="true"></div>
  <p>Loading pictures...</p>
</div>

<!-- Horizontally centered using flexbox -->
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden"></span>
  </div>
</div>

<!-- Placement using flexbox -->
<div class="d-flex align-items-center">
  Loading...
  <div class="spinner-border text-body-tertiary ms-auto" role="status" aria-hidden="true"></div>
</div>

Sizing #

Create small spinners using .spinner-border-sm / .spinner-grow-sm, or use custom CSS, inline styles, or utility classes to change the dimensions as needed.

<!-- Small spinners -->
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Large spinners using utilities -->
<div class="spinner-border specific-w-50 specific-h-50" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow specific-w-50 specific-h-50" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Buttons #

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

<button class="btn btn-secondary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-secondary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>