bootstrap
  1. bootstrap-spinners
PreviousNext

Bootstrap Spinners

Bootstrap Spinners are animated loading indicators that can be used to show that content is being loaded asynchronously.

Syntax

To use Bootstrap Spinners, you need to add the following code in your HTML file:

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Example

Here is an example of a Bootstrap Spinner.

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

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

Colors

The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. 

<div class="row">
    <div class="col-12">
        <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>
</div>
<div class="row mt-3">
    <div class="col-12">
        <!-- Growing spinner -->
        <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>
    </div>
</div>
Try Playground

Size

Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.


<div class="row">
    <div class="col">
        <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="col">
        <div class="spinner-border" 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>
</div>
Try Playground

Explanation

In the code above, we used the following classes to create the spinner:

  • spinner-border: this is the main class that indicates that this is a spinner.
  • text-primary: this sets the color of the spinner to the primary color of the theme.
  • sr-only: this class hides the "Loading..." text from screen readers.

Use

Bootstrap Spinners can be used to indicate that content is being loaded asynchronously. They can be placed anywhere on the page that makes sense for the user experience, such as in a modal dialog or in a loading message on a page.

Important Points

  • Bootstrap Spinners are animated loading indicators that can be used to show that content is being loaded asynchronously.
  • Spinners can be customized with CSS classes to change their size, color, and style.
  • Spinners are accessible by default with ARIA attributes.

Summary

Bootstrap Spinners provide a simple and elegant solution to indicating that content is being loaded asynchronously. By using Spinners, you can provide a better user experience by letting them know that something is happening and that they should wait a moment longer.

ProgressModal
Published on: