Spinners

<div class="spinner-material text-blue">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-blue">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-gray">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-green">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-cyan">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-yellow">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-red">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-light">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-dark">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-indigo">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-purple">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-pink">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-orange">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material text-teal">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material spinner-rainbow">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

<div class="spinner-material spinner-material-sm spinner-blue">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none">
  </svg>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="spinner-grow text-blue"></div>

<div class="spinner-grow text-gray"></div>

<div class="spinner-grow text-green"></div>

<div class="spinner-grow text-cyan"></div>

<div class="spinner-grow text-yellow"></div>

<div class="spinner-grow text-red"></div>

<div class="spinner-grow text-light"></div>

<div class="spinner-grow text-dark"></div>

<div class="spinner-grow text-indigo"></div>

<div class="spinner-grow text-purple"></div>

<div class="spinner-grow text-pink"></div>

<div class="spinner-grow text-orange"></div>

<div class="spinner-grow text-teal"></div>

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

<div class="spinner-grow spinner-grow-sm"></div>