Bootstrap Spinners
In this tutorial you will learn how to use the Bootstrap spinner component.
Creating the Spinners with Bootstrap
Bootstrap introduces the new spinner component that you can use to show the loading state in your applications. Spinners are typically loading icons and they're built only with HTML and CSS. However, you need some custom JavaScript to show or hide them on a web page.
Moreover, you can easily customize the appearance, alignment, and sizing of the spinners with the pre-defined utility classes. Now, let's see how to create them.
Creating Border Spinner
You can create a border spinner or a lightweight loading indicator, like this:
Example
Try this code »<div class="spinner-border">
<span class="visually-hidden">Loading...</span>
</div>— The output of the above example will look something like this:
The special .visually-hidden class hides an element to all devices except screen readers.
Creating Colored Spinner
You can use the text color utility classes to customize the color of spinners.
<div class="spinner-border text-primary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light">
<span class="visually-hidden">Loading...</span>
</div>— The output of the above example will look something like this:
Creating Growing Spinners
You can also create growing spinners that repeatedly grow and fade out, like this:
Example
Try this code »<div class="spinner-grow">
<span class="visually-hidden">Loading...</span>
</div>— The output of the above example will look something like this:
Similarly, like the border spinners you can also customize the colors of growing spinners using the Bootstrap's text color utility classes, as shown in the following example:
<div class="spinner-grow text-primary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark">
<span class="visually-hidden">Loading...</span>
</div>— The output of the above example will look something like this:
Sizing of Spinners
You can use the class .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components such as buttons.
Example
Try this code »<div class="spinner-border spinner-border-sm">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
<span class="visually-hidden">Loading...</span>
</div>— The output of the above example will look something like this:
Alternatively, you can use the custom CSS or inline styles to change the size as needed.
Example
Try this code »<div class="spinner-border" style="width: 40px; height: 40px;">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
<span class="visually-hidden">Loading...</span>
</div>— The output of the above example will look something like this:
Using Spinners within Buttons
You can also use spinners within buttons to indicate an action is currently processing or taking place.
Here's an example where we've placed the spinners inside the disabled buttons.
Example
Try this code »<!-- Border spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<!-- Growing spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading...
</button>— The output of the above example will look something like this:
Alignment of Spinners
You can easily align the spinners to left, right or center using the flexbox, text alignment, or float utility classes. Let's try out the following example and see how it actually works:
Example
Try this code »<!-- Center align spinner using flex utilities -->
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- Center align spinner using text alignment utilities -->
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
