Spinners

Preview

This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.

Border spinner

Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility.

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

Growing spinner

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

Sizing

Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components. Or, use custom CSS or inline styles to change the dimensions as needed.

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

Example

<button class="btn btn-primary" disabled>
    <div class="spinner-border spinner-border-sm me-2"></div>Loading...
</button>