Spinners
Border Spinners#
Use the border spinners for a lightweight loading indicator.
<!-- Border Spinners -->
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Color Spinners #
You can use any of our text color utilities on the standard spinner.
<!-- Color Spinners -->
<div class="spinner-border text-primary me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondar me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Growing Spinners #
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
<!-- Growing Spinners -->
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Color Growing Spinners #
You can use any of our text color utilities on the standard spinner.
<!-- Color Spinners -->
<div class="spinner-grow text-primary me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Alignment #
Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.
<!-- Alignment Spinners -->
<div class="d-flex justify-content-center border p-2">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Size #
Add .spinner-border-sm and
.spinner-border.sm-** to
make a smaller spinner that can quickly
be used within other components.
html
<!-- Size Spinners -->
<div class="spinner-border text-primary spinner-border-sm me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-primary spinner-grow-sm me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-primary spinner-border me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-primary spinner-grow me-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Placement #
Use flexbox utilities,
float utilities, or
text alignment utilities to
place spinners exactly where you need
them in any situation.
<!-- placement Spinners -->
<div class="d-flex align-items-center border p-2">
<strong>Loading...</strong>
<div class="spinner-border text-primary ms-auto" role="status" aria-hidden="true"></div>
</div>
Buttons Spinner #
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.
<!-- Buttons Spinners -->
<button class="btn btn-primary me-1" type="button" disabled>
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm me-1" role="status" aria-hidden="true"></span>
Loading...
</button>