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:
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:
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>
You can use Bootstrap spinners with buttons to indicate loading or processing state.
As an example:
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.