Skip to main content

Spinners in Bootstrap 5

Bootstrap Spinners​

Bootstrap provides a variety of spinner styles that can be used to indicate the loading state of a component or page.

A spinner is an animated icon or graphic that shows that the page or component is loading or processing a request.

To use a spinner in Bootstrap , you can use the spinner-border or spinner-grow classes along with the text- or bg- color classes to change the color of the spinner.

As an example:

Editor

Loading...

In this example:

  • The d-flex class is used to make the spinner container a flexbox container and justify-content-center is used to horizontally center the spinner.
  • The spinner-border class is used to create a circular spinner with a border, while the spinner-grow class is used to create a spinner with a growing animation.
  • The text-primary class is used to set the color of the spinner to the primary color defined in the Bootstrap theme.
  • We have also added the visually-hidden class to the span element to hide the "Loading..." text from screen readers.

Growing Spinners​

Spinners have a property to make them grow. You can use the spinner-grow class along with spinner-[color] to achieve this effect.

As an example:

Editor

Loading...

In this example:

  • We are using the d-flex class to align the spinners horizontally.
  • The align-items-center class is used to center the spinners vertically within their container.
  • The spinner-grow class is applied to each spinner to make them grow, and the text-[color] classes are used to change the color of the spinners.
  • The visually-hidden class is used to hide the "Loading..." text from screen readers.

Spinner Size​

Spinners come in four different sizes: small, medium, and large, and extra-large.

You can apply the size class .spinner-{size} to change the size of the spinner.

Here are the class names for each size:

  • .spinner-sm: small spinner
  • .spinner: medium spinner (default)
  • .spinner-lg: large spinner
  • .spinner-xl: extra-large spinner

As an example:

if you want to create an extra-large spinner, you can use the following code:

<div class="d-flex justify-content-center align-items-center">
     <div class="spinner-border spinner-border-xl" role="status">
          <span class="visually-hidden">Loading...</span>
     </div>
</div>

Spinner Buttons​

You can use Bootstrap spinners with buttons to indicate loading or processing state.

As an example:

Editor

Loading...

In this example:

  • We're using the .btn and .btn-primary classes to create a primary button.
  • We're also using the .spinner-border class to create a spinner with a border, and the .spinner-border-sm class to make the spinner small.
  • The role attribute with a value of "status" and the aria-hidden attribute are used to make the spinner accessible to screen readers.