Avant UI Kit

Documentation

Spinners

Indicate the loading state of a component or page.

Border spinner

Use the border spinners for a lightweight loading indicator. Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. 

<div class="spinner-border text-primary" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
</div>

Growing spinner

If you don’t fancy a border spinner, switch to the grow spinner. 

<div class="spinner-grow text-primary" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" role="status">
    <span class="sr-only">Loading...</span>
</div>

Sizing

Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner or .spinner-border-lg and .spinner-grow-lg to make a larger spinner. 



<div class="spinner-border spinner-border-sm" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border spinner-border-lg" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-border-lg" role="status">
    <span class="sr-only">Loading...</span>
</div>

With buttons

Use spinners within buttons to indicate an action is currently processing or taking place. 

<button class="btn btn-outline-secondary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    Loading...
</button>

<button class="btn btn-outline-secondary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    Loading...
</button>

View the complete spinners documentation at Bootstrap website.