Bootstrap · Chapter 16 of 43

Bootstrap Spinners

Spinners indicate that content is loading, giving users visual feedback while they wait. Bootstrap includes two styles: a rotating border spinner (.spinner-border) and a pulsing dot spinner (.spinner-grow).

Both spinner types can be colored using text color utility classes and sized using inline styles or width/height utility classes.

Syntax

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

Border and growing spinners

.spinner-border shows a rotating circular border. .spinner-grow shows a small circle that grows and fades repeatedly. Both need a visually hidden 'Loading...' text for screen readers.

Coloring and sizing spinners

Apply .text-{color} classes to change a spinner's color. Add .spinner-border-sm or .spinner-grow-sm for a smaller version suitable for buttons.

Example 1 (html)

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

Output

A blue rotating circular loading spinner

spinner-border shows the rotating animation and text-primary colors it blue.

Example 2 (html)

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

Output

A disabled blue button showing a small spinner and the word Loading...

spinner-border-sm creates a small spinner suitable for placing inside a button.

Key points

.spinner-border shows a rotating ring animation.
.spinner-grow shows a pulsing, growing dot animation.
Always include hidden 'Loading...' text for accessibility.
.spinner-border-sm and .spinner-grow-sm create smaller spinners.

💡 Note: Spinners are purely visual — you still need JavaScript to show or hide them based on real loading state.

Bootstrap Spinners

Border and growing spinners

Coloring and sizing spinners

Key points

📝 Quick Quiz