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.

Default markup

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

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


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

<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>
<div class="spinner-border text-gray" role="status"></div>


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

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

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

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

<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>
<div class="spinner-grow text-gray" role="status"></div>


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.

<a href="#" class="btn btn-primary">
  <span class="spinner-border spinner-border-sm mr-2" role="status"></span>
<a href="#" class="btn btn-danger">
  <span class="spinner-border spinner-border-sm mr-2" role="status"></span>
<a href="#" class="btn btn-warning">
  <span class="spinner-border spinner-border-sm mr-2" role="status"></span>
<a href="#" class="btn btn-success">
  <span class="spinner-border spinner-border-sm" role="status"></span>
<a href="#" class="btn btn-white">
  <span class="spinner-border spinner-border-sm" role="status"></span>