Bootstrap 5 — Spinners

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.