Mono provides a variety of  Spinkit Spinners  components thats suit its design standards. To add or customize Spinkit Spinners go to _spinkit.scss and edit or create your own.
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-rotating-plane"></div>
</div>
          
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-wonder-cube">
    <div class="cube1"></div>
    <div class="cube2"></div>
  </div>
</div>
          
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-three-bounce">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>
</div>
          
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-fading-circle">
    <div class="sk-circle1 sk-circle"></div>
    <div class="sk-circle2 sk-circle"></div>
    <div class="sk-circle3 sk-circle"></div>
    <div class="sk-circle4 sk-circle"></div>
    <div class="sk-circle5 sk-circle"></div>
    <div class="sk-circle6 sk-circle"></div>
    <div class="sk-circle7 sk-circle"></div>
    <div class="sk-circle8 sk-circle"></div>
    <div class="sk-circle9 sk-circle"></div>
    <div class="sk-circle10 sk-circle"></div>
    <div class="sk-circle11 sk-circle"></div>
    <div class="sk-circle12 sk-circle"></div>
  </div>
</div>
            
  <div class="d-flex align-items-center justify-content-center" style="height: 160px">
    <div class="sk-double-bounce">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
  </div>
  
            
        
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-pulse"></div>
</div>
          
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-circle">
    <div class="sk-circle1 sk-child"></div>
    <div class="sk-circle2 sk-child"></div>
    <div class="sk-circle3 sk-child"></div>
    <div class="sk-circle4 sk-child"></div>
    <div class="sk-circle5 sk-child"></div>
    <div class="sk-circle6 sk-child"></div>
    <div class="sk-circle7 sk-child"></div>
    <div class="sk-circle8 sk-child"></div>
    <div class="sk-circle9 sk-child"></div>
    <div class="sk-circle10 sk-child"></div>
    <div class="sk-circle11 sk-child"></div>
    <div class="sk-circle12 sk-child"></div>
  </div>
</div>
          
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-wave">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>
          
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-chasing-dots">
    <div class="dot1"></div>
    <div class="dot2"></div>
  </div>
</div>
          
<div class="d-flex align-items-center justify-content-center" style="height: 160px">
  <div class="sk-cube-grid">
    <div class="sk-cube sk-cube1"></div>
    <div class="sk-cube sk-cube2"></div>
    <div class="sk-cube sk-cube3"></div>
    <div class="sk-cube sk-cube4"></div>
    <div class="sk-cube sk-cube5"></div>
    <div class="sk-cube sk-cube6"></div>
    <div class="sk-cube sk-cube7"></div>
    <div class="sk-cube sk-cube8"></div>
    <div class="sk-cube sk-cube9"></div>
  </div>
</div>
           
                              
                             
                              
                             
                             
                             
                              
                            