Spinners
A simple, fast component used to create a smoothly loading experience.
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>