Bootstrap 4 Spinners

Spinners indicate loading or processing status. Bootstrap spinners are lightweight and customizable.

Use .spinner-border class, to create a spinner/loader:

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

Add contextual classes to change spinner colors:

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>

Use .spinner-grow to create a growing effect:

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

Control spinner size with spinner-border-sm:

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

Use custom size with inline CSS:

<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>

Add spinners inside buttons to show progress:

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