Bootstrap4 Loading Effect

To create a loading effect, you can use the.spinner-borderclass:

Example

<div class="spinner-border"></div>

Try it yourself »

You can use text color classes to set different colors:

Example

<div class="spinner-border text-muted"></div> <div class="spinner-border text-primary"></div> <div class="spinner-border text-success"></div> <div class="spinner-border text-info"></div> <div class="spinner-border text-warning"></div> <div class="spinner-border text-danger"></div> <div class="spinner-border text-secondary"></div> <div class="spinner-border text-dark"></div> <div class="spinner-border text-light"></div>

Try it yourself »

Flashing Loading Effect

Use the .spinner-grow class to set a flashing loading effect:

Example

<div class="spinner-grow text-muted"></div> <div class="spinner-grow text-primary"></div> <div class="spinner-grow text-success"></div> <div class="spinner-grow text-info"></div> <div class="spinner-grow text-warning"></div> <div class="spinner-grow text-danger"></div> <div class="spinner-grow text-secondary"></div> <div class="spinner-grow text-dark"></div> <div class="spinner-grow text-light"></div>

Try it yourself »

Set Loading Effect Size

Use the .spinner-border-sm or .spinner-grow-sm classes to create the size of the loading effect:

Example

<div class="spinner-grow text-muted"></div> <div class="spinner-grow text-primary"></div> <div class="spinner-grow text-success"></div> <div class="spinner-grow text-info"></div> <div class="spinner-grow text-warning"></div> <div class="spinner-grow text-danger"></div> <div class="spinner-grow text-secondary"></div> <div class="spinner-grow text-dark"></div> <div class="spinner-grow text-light"></div>

Try it yourself »

Loading Button

We can also set a button that is currently loading.

Example

<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> Loading.. </button>

Try it yourself »
Other Extensions