Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add spinners with Bootstrap 5.
Spinners
Spinners lets us add the loading state of a component or page with Bootstrap spinners.
It doesn’t use JavaScript to implement it.
Border Spinner
We can add a border spinner with the spinner-border class:
<div class="spinner-border">
<span class="sr-only">Loading...</span>
</div>
We added the spinner-border class and the span with the sr-only class for screen readers.
Colors
We can apply different colors to spinners.
For example, we can write:
<div class="spinner-border text-primary">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark">
<span class="sr-only">Loading...</span>
</div>
We add text-* classes to add the colors to the spinner.
Growing Spinner
We can add a growing spinner with the spinner-grow class.
For example, we can write:
<div class="spinner-grow">
<span class="sr-only">Loading...</span>
</div>
We can also change the color with various classes:
<div class="spinner-grow text-primary">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark">
<span class="sr-only">Loading...</span>
</div>
Alignment
We can change the alignment of the spinner.
For instance, we can add margins to them:
<div class="spinner-border m-5">
<span class="sr-only">Loading...</span>
</div>
The placement can be set with the justify-content-* classes:
<div class="d-flex justify-content-center">
<div class="spinner-border">
<span class="sr-only">Loading...</span>
</div>
</div>
We can also have floats:
<div class="clearfix">
<div class="spinner-border float-right">
<span class="sr-only">Loading...</span>
</div>
</div>
float-right puts the spinner on the right.
We can also set text-align :
<div class="text-center">
<div class="spinner-border">
<span class="sr-only">Loading...</span>
</div>
</div>
Size
We can change the size of the spinner.
We can add the spinner-border-sm or spinner-grow-sm classes to make a smaller spinner:
<div class="spinner-border spinner-border-sm">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
<span class="sr-only">Loading...</span>
</div>
We can also change the size:
<div class="spinner-border" style="width: 5rem; height: 5rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 5rem; height: 5rem;">
<span class="sr-only">Loading...</span>
</div>
Buttons
We can add spinners to buttons.
For example, we can write:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
We add the spinner so inside the button and it’ll be displayed.
Also, we can do the same with the growing spinner:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading...
</button>
Conclusion
We can add spinners to display loading progress.
It’s implemented with HTML and CSS only so JavaScript isn’t required.