Spinner Styles

Spinners or loaders prove useful when the user has to wait while loading a web page. These spinners help retain the traffic of a website during this waiting period because these let the user know that the page will be loaded soon. Without these the user might close the page before it loads. This blog highlights how spinners are created and styled using Bootstrap 5.

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.

HTML

Here we are inserting a spinner inside a div container which is further wrapped up inside another div container.

Output

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Spinner-Styles-01.gif" height="117" src="data:image/svg xml,” width=”688″>

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

HTML

The above code will generate a total of 9 spinners each with a different color.

Output

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Spinner-Styles-02.gif" height="90" src="data:image/svg xml,” width=”688″>

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.

HTML

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.

Output 

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Spinner-Styles-03.gif" height="90" src="data:image/svg xml,” width=”688″>

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.

HTML

The code snippet will generate both kinds of spinners which are spinning and growing, having a small size.

Output

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Spinner-Styles-04.gif" height="80" src="data:image/svg xml,” width=”688″>

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.

HTML

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 element. Meanwhile, the second button adds a small sized growing button with text.

Output

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/Spinner-Styles-05.gif" height="90" src="data:image/svg xml,” width=”688″>

Following the approaches discussed above you can create, style, and add spinners to various elements.

Conclusion

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.