How to create spinners using Bootstrap 5
For the purpose of creating a spinner simply assign the .spinner-border class to the elements in which you want to add the spinner.
Here we are inserting a spinner inside a div container which is further wrapped up inside another div container.
A spinner is also referred to as a loader.
How to make colorful spinners
You can style your spinners by using the color utilities classes available in Bootstrap 5. Here we have used all of these classes to make colorful spinners
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-muted"></div>
The above code will generate a total of 9 spinners each with a different color.
This is how you can make colorful spinners.
How to create growing spinners
Another way you can style your spinner is by giving it a growing effect rather than a spinning effect. To assign your spinner a growing effect use the .spinner-grow class.
As shown in the code snippet above you can use all of the color utility classes along with the .spinner-grow class to create growing spinners.
A growing effect was successfully added to the spinners.
How to scale spinner size
For the purpose of making a spinner that is smaller in size than the default size use the .spinner-border-sm class or if you want to make a small growing spinner then use the .spinner-grow-sm.
The code snippet will generate both kinds of spinners which are spinning and growing, having a small size.
The output shows spinners that are smaller in size as compared to the default size.
How to add spinners to buttons
We often want to add spinners to buttons in situations when the user has to wait for the source to load after clicking the button. Here is how you can add spinners to buttons.
In the above code, the first button adds a small sized spinner without any text. The spinner was created by assigning the relevant classes to the <span> element. Meanwhile, the second button adds a small sized growing button with text.
Following the approaches discussed above you can create, style, and add spinners to various elements.
A spinner is created using the .spinner-border class, meanwhile to style the spinner you can use various text color classes available which are .text-primary, .text-info, .text-success, .text-secondary, .text-muted, .text-light, .text-danger, .text-dark, and .text-warning. To give the spinner a growing effect use the .spinner-grow class, moreover, to create small sized spinner use the .spinner-border-sm, or .spinner-grow-sm classes. Furthermore, to add spinners to buttons span them inside the element.