Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Border spinner

Use the border spinners for a lightweight loading indicator.

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

Colors

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.

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

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

 <!-- success spinner -->
 <div class="spinner-border text-success" role="status">
 <span class="visually-hidden">Loading...</span>
 </div>

 <!-- danger spinner -->
 <div class="spinner-border text-danger" role="status">
 <span class="visually-hidden">Loading...</span>
 </div>

 <!-- warning spinner -->
 <div class="spinner-border text-warning" role="status">
 <span class="visually-hidden">Loading...</span>
 </div>

 <!-- info spinner -->
 <div class="spinner-border text-info" role="status">
 <span class="visually-hidden">Loading...</span>
 </div>

 <!-- light spinner -->
 <div class="spinner-border text-light" role="status">
 <span class="visually-hidden">Loading...</span>
 </div>

 <!-- dark spinner -->
 <div class="spinner-border text-dark" role="status">
 <span class="visually-hidden">Loading...</span>
 </div>

Growing spinner

 <!-- growing spinner -->
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities. Here it is in blue, along with the supported variants. 

<!-- primary growing spinner -->
  <div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

  <!-- secondary growing spinner -->
  <div class="spinner-grow text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

   <!-- success growing spinner -->
  <div class="spinner-grow text-success" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

  <!-- danger growing spinner -->
  <div class="spinner-grow text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

   <!-- warning growing spinner -->
  <div class="spinner-grow text-warning" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

   <!-- info growing spinner -->
  <div class="spinner-grow text-info" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

   <!-- light growing spinner -->
  <div class="spinner-grow text-light" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

   <!-- dark growing spinner -->
  <div class="spinner-grow text-dark" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

Alignment

Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.

Margin

Use margin utilities like .m-5 for easy spacing.

 <!-- margin -->
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Placement

Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.

Flex

Use .d-flex and flex property to make placement.

 <!-- placement flex center -->
 <div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
Loading... 
 <!-- flex placement right -->
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Floats

Use float utilities to make placement.

 <!-- floats -->
 <div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Text align

Use text alignment utilities to make placement.

 <!-- text align -->
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Size

Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.

 <!-- size -->
<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>

Or, use custom CSS or inline styles to change the dimensions as needed.

 <!-- size dimensions chnage -->
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Buttons

 <!-- button spinner -->
 <button class="btn btn-primary" 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-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
 <!-- button growing -->
<button class="btn btn-primary" 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-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
Contents