Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Bootstrap Spinners documentationBorder spinner
Use the border spinners for a lightweight loading indicator.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Colors
The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. 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-body" 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>
Why not use
border-colorutilities? Each border spinner specifies atransparentborder for at least one side, so.border-{color}utilities would override that.
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>
Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities. Here it is in blue, along with the supported variants.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-body" 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
Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.
Margin
Use margin utilities like .m-5 for easy spacing.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Placement
Use flexbox utilities , float utilities , or text alignment utilities to place spinners exactly where you need them in any situation.
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<span>Loading...</span>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Floats
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Text align
<div class="text-center">
<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>
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>