Spinners

Basic example

Indicate the loading state of a component or page with Bootstrap spinners.

HTML Code for this Element

<div class="spinner-border" role="status">
	<span class="visually-hidden">Loading...</span>
</div>

Colors

Use Bootstrap's text-* utilities to change the appearance of the standard spinner.

HTML Code for this Element

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
	</div>

Growing Spinner

Another variation on the spinner is the growing spinner

HTML Code for this Element

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Growing spinner with color

You can also change the color of the growing spinner

HTML Code for this Element

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Size

You can also change the size of the Spinners.

HTML Code for this Element

<div class="mb-2">
	<div class="spinner-border spinner-border-sm" role="status">
		<span class="visually-hidden">Loading...</span>
		</div>
		<div class="spinner-grow spinner-grow-sm" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
</div>
<div class="">
	<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
</div>

Buttons

Use spinners within buttons to indicate an action is currently processing or taking place.

HTML Code for this Element

<button class="btn btn-primary" type="button" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	<span class="visually-hidden">Loading...</span>
  </button>
  <button class="btn btn-primary" type="button" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	Loading...
  </button>