Spinner

  
   
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Static Spinner</h5>
   <div class="spinner-border spinner-border-sm" role="status">
        <span class="visually-hidden">Loading...</span>
            </div>
    <div class="spinner-border" style="width: 30px; height: 30px;" role="status">
  <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border" style="width: 40px; height: 40px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border" style="width: 50px; height: 50px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border" style="width: 60px; height: 60px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border width" style="width: 80px; height: 80px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
</div>
</div>
<div class="card">
<div class="card-body bg-light">
  <h5 class="card-title">White Spinner</h5>
  <div class="spinner-border spinner-border-sm spinner-border-white" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border spinner-border-white" style="width: 30px; height: 30px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border spinner-border-white" style="width: 40px; height: 40px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border spinner-border-white" style="width: 50px; height: 50px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border spinner-border-white" style="width: 60px; height: 60px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border width spinner-border-white" style="width: 80px; height: 80px;" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
</div>
</div>
<div class="card">
<div class="card-body">
  <h5 class="card-title">Color Spinner</h5>
  <!-- Color spinners -->
  <div class="spinner-border text-primary" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border text-secondary" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border text-success" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border text-danger" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border text-warning" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border text-info" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border text-light" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-border text-dark" role="status">
     <span class="visually-hidden">Loading...</span>
  </div>
  <!-- End Color spinners -->
</div>
</div>
</div>
</div>
      
    
              

  
   

   
           
     .spinner-grow,
     .spinner-border {
       display: inline-block;
       width: var(--#{$prefix}spinner-width);
       height: var(--#{$prefix}spinner-height);
       vertical-align: var(--#{$prefix}spinner-vertical-align);
       // stylelint-disable-next-line property-disallowed-list
       border-radius: 50%;
       animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
     }
     
     // scss-docs-start spinner-border-keyframes
     @keyframes spinner-border {
       to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
     }
     // scss-docs-end spinner-border-keyframes
     
     .spinner-border {
       // scss-docs-start spinner-border-css-vars
       --#{$prefix}spinner-width: #{$spinner-width};
       --#{$prefix}spinner-height: #{$spinner-height};
       --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
       --#{$prefix}spinner-border-width: #{$spinner-border-width};
       --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
       --#{$prefix}spinner-animation-name: spinner-border;
       // scss-docs-end spinner-border-css-vars
     
       border: var(--#{$prefix}spinner-border-width) solid currentcolor;
       border-right-color: transparent;
     }
     
     .spinner-border-sm {
       // scss-docs-start spinner-border-sm-css-vars
       --#{$prefix}spinner-width: #{$spinner-width-sm};
       --#{$prefix}spinner-height: #{$spinner-height-sm};
       --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
       // scss-docs-end spinner-border-sm-css-vars
     }
     
     //
     // Growing circle
     //
     
     // scss-docs-start spinner-grow-keyframes
     @keyframes spinner-grow {
       0% {
         transform: scale(0);
       }
       50% {
         opacity: 1;
         transform: none;
       }
     }
     // scss-docs-end spinner-grow-keyframes
     
     .spinner-grow {
       // scss-docs-start spinner-grow-css-vars
       --#{$prefix}spinner-width: #{$spinner-width};
       --#{$prefix}spinner-height: #{$spinner-height};
       --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
       --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
       --#{$prefix}spinner-animation-name: spinner-grow;
       // scss-docs-end spinner-grow-css-vars
     
       background-color: currentcolor;
       opacity: 0;
     }
     
     .spinner-grow-sm {
       --#{$prefix}spinner-width: #{$spinner-width-sm};
       --#{$prefix}spinner-height: #{$spinner-height-sm};
     }
     
     @if $enable-reduced-motion {
       @media (prefers-reduced-motion: reduce) {
         .spinner-border,
         .spinner-grow {
           --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
         }
       }
     }