Spinners

A simple, fast component used to create a smoothly loading experience.

Regular Spinners

Small Spinners

Spinners with Dark Background

Spinner in a primary button

Spinner in a gold button


<div class="p-2">
   <h4>Regular Spinners</h4>
   <div class="fui-spinner-border"></div>
   <div class="fui-spinner-border text-primary"></div>
   <div class="fui-spinner-border text-secondary"></div>
   <div class="fui-spinner-border text-gold"></div>
   <div class="fui-spinner-border text-success"></div>
   <div class="fui-spinner-border text-warning"></div>
   <div class="fui-spinner-border text-danger"></div>
   <div class="fui-spinner-border text-gray"></div>
   <div class="fui-spinner-border text-muted"></div>
</div>
<div class="p-2">
   <h4>Small Spinners</h4>
   <div class="fui-spinner-border fui-spinner-border-sm">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-primary">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-secondary">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-gold">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-success">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-warning">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-danger">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-gray">
   </div>
   <div class="fui-spinner-border fui-spinner-border-sm text-muted">
   </div>
</div>
<div class="mt-2 p-2 bg-black">
   <h4 class="text-white">Spinners with Dark Background</h4>
   <div class="fui-spinner-border fui-spinner-dark">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-primary">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-secondary">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-gold">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-success">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-warning">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-danger">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-gray">
   </div>
   <div class="fui-spinner-border fui-spinner-dark text-muted">
   </div>
</div>
<div class="mt-4 pl-0">
   <h4>Spinner in a primary button</h4>
   <button class="fui-btn fui-btn-primary" type="button" disabled>
   <span class="fui-spinner-border fui-spinner-border-sm" role="status" aria-hidden="true"></span>
   Loading...
   </button>
   <h4 class="mt-4">Spinner in a gold button</h4>
   <button class="fui-btn fui-btn-gold" type="button" disabled>
   <span class="fui-spinner-border fui-spinner-border-sm"></span>
   Loading...
   </button>
</div>