Tutorial Guides

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Spinners

Spinners in Bootstrap 5 are a flexible component used to indicate loading or ongoing processes in your web application.

Example

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

Try it yourself

Colored Spinners:

Use the Bootstrap color class:

Example

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

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

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

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

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

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

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

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

Try it yourself

Spinners Size:

Use the .spinner-border-sm class to change spinner size:

Example

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

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

Try it yourself

Grow Spinner :

Use the .spinner-grow class to change spinner/loader:

Example

<div class="spinner-grow text-primary" role="status"></div>

<div class="spinner-grow text-secondary" role="status"></div>

<div class="spinner-grow text-success" role="status"></div>

<div class="spinner-grow text-danger" role="status"></div>

<div class="spinner-grow text-warning" role="status"></div>

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

<div class="spinner-grow text-light" role="status"></div>

<div class="spinner-grow text-dark" role="status"></div>

Try it yourself

Grow Spinner Size:

Use the .spinner-grow-sm class to change spinner size:

Example

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

<div class="spinner-grow spinner-grow-sm" role="status"></div>

Try it yourself