Spinners
Border Spinners
Use the border spinners for a lightweight loading indicator.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>Border Colors
You can use any of our text color utilities on the standard spinner.
<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>Circle Loader
css loading animations
Ring Loader
css loading animations
Lines Loader
css loading animations
Heart Loader
css loading animations
Ripple Loader
css loading animations
Spinner Loader
css loading animations
Growing Spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>Growing Color
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
<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>Alignment
Use flexbox utilities or text alignment utilities to place spinners exactly where you need them in any situation.
<div class="text-center mg-b-20">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="text-end">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>Size
Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.
<div class="spinner-border spinner-border-sm" 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>Button with Spinners
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
<button class="btn ripple btn-primary" type="button"><span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span> <span class="sr-only">Loading...</span></button>
<button class="btn ripple btn-secondary" disabled type="button"><span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span> Loading...</button>
Total Users
34,789
Total Sales