Bootstrap 4 Spinners


Basic Spinners

With the .spinner class in bootstrap we can create a spinner or loader that will keep spinning all the time. When a user starts a process, a loader is run for as long as the process takes time to exit. To use it you need to know how many classes of .spinner there are.

Example code

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

Spinner with Borders

To create a spinner / loader you need to use the .spinner-border class.

Example code

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

Growing Spinners

To create a growing spinner / loader you need to use .spinner-grow class.

Example code

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

Colored Spinners

The color change of spinners in bootstrap has many contextual classes. Those classes are .text-muted, .text-primary, .text-secondary, .text-info, .text-success, .text-warning, .text-danger, .text-dark, .text-light. These must be added to the .spinner class to be used.

Example code

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

Colored Growing Spinners

The color change of growing spinners in bootstrap has many contextual classes. Those classes are .text-muted, .text-primary, .text-secondary, .text-info, .text-success, .text-warning, .text-danger, .text-dark, .text-light. These must be added to the .spinner class to be used.

Example code

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

Spinners Sizes

Bootstrap also has .spinner-border-sm and .spinner-grow-sm classes to resize spinners. These make the spinners smaller than normal.

Example code

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

Spinners Inside Button

Spinners can be placed inside the button and with or without any text.

Example code

<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-grow spinner-grow-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm">
</span> Please wait
</button>
<button class="btn btn-primary">
<span class="spinner-grow spinner-grow-sm"></span> Please wait
</button>