Documentation

Browse source code
On this page

Spinners

Bootstrap documentation

Default markup

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

Colors

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

Size

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

Growing spinner

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

Buttons

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