Spinner
A spinner is used to show the loading state of a component or page. It provides feedback for an action that takes longer to complete.
Default markup
The default spinner shows that an action is in progress.
<div class="spinner-border"></div>Colors
Set the color with a text-* class from the color palette.
<div class="spinner-border text-blue" role="status"></div>
<div class="spinner-border text-azure" role="status"></div>
<div class="spinner-border text-indigo" role="status"></div>
<div class="spinner-border text-purple" role="status"></div>
<div class="spinner-border text-pink" role="status"></div>
<div class="spinner-border text-red" role="status"></div>
<div class="spinner-border text-orange" role="status"></div>
<div class="spinner-border text-yellow" role="status"></div>
<div class="spinner-border text-lime" role="status"></div>
<div class="spinner-border text-green" role="status"></div>
<div class="spinner-border text-teal" role="status"></div>
<div class="spinner-border text-cyan" role="status"></div>Size
Add spinner-border-sm for a smaller spinner.
<div class="spinner-border" role="status"></div>
<div class="spinner-border spinner-border-sm" role="status"></div>Growing spinner
The growing spinner pulses instead of rotating.
<div class="spinner-grow" role="status"></div>It takes the same text-* color classes.
<div class="spinner-grow text-blue" role="status"></div>
<div class="spinner-grow text-azure" role="status"></div>
<div class="spinner-grow text-indigo" role="status"></div>
<div class="spinner-grow text-purple" role="status"></div>
<div class="spinner-grow text-pink" role="status"></div>
<div class="spinner-grow text-red" role="status"></div>
<div class="spinner-grow text-orange" role="status"></div>
<div class="spinner-grow text-yellow" role="status"></div>
<div class="spinner-grow text-lime" role="status"></div>
<div class="spinner-grow text-green" role="status"></div>
<div class="spinner-grow text-teal" role="status"></div>
<div class="spinner-grow text-cyan" role="status"></div>Button with spinner
Put a spinner inside a button while its action runs, and disable the button so it can't be clicked twice.
<div class="btn-list">
<a href="#" class="btn btn-primary">
<span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
</a>
<a href="#" class="btn btn-danger">
<span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
</a>
<a href="#" class="btn btn-warning">
<span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
</a>
<a href="#" class="btn btn-success">
<span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
</a>
<a href="#" class="btn">
<span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
</a>
</div>Animated dots
Animated dots are a lighter loading indicator for inline text. Add the .animated-dots class to a span.
Loading
<h1>Loading <span class="animated-dots"></span>
</h1>Animated dots also fit inside a button while its action runs.
<div class="btn-list">
<a href="#" class="btn btn-primary"> Loading <span class="animated-dots"></span>
</a>
<a href="#" class="btn btn-primary disabled"> Loading <span class="animated-dots"></span>
</a>
</div>Accessibility
- A spinner on its own says nothing. Add
role="status"and avisually-hiddenlabel such as "Loading", so the wait is announced. - Put the spinner where the content will appear, and set
aria-busy="true"on that container while it loads. - Do not use a spinner for something that takes under a second. It flashes, which is more distracting than no feedback at all.
- For a wait with a known length use a progress bar instead - it tells users how much is left.
SCSS variables
Use these SCSS variables to customize spinners. The default values are:
$spinner-width: 1.5rem;
$spinner-height: 1.5rem;
$spinner-vertical-align: -0.125em;
$spinner-border-width: 2px;
$spinner-animation-speed: 0.75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: 1rem;
$spinner-border-width-sm: 1px;Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
spinner-border | component | Rotating ring |
spinner-grow | component | Pulsing dot, a quieter alternative |
text-{color} | color | Any base color, for example text-primary |
spinner-border-sm | size | Small ring |
spinner-grow-sm | size | Small dot |
