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