Bootstrap Spinners

Bootstrap 4 offers spinner is a loading indicator that is used to display the loading state of any component or web page. The spinner is also known as a loader or pre-loader.

A spinner/loader is an animation tool that keeps the user entertained during the loading of any webpage. They are created using only HTML (HyperText Markup Language) and CSS (Cascading Style Sheets), and it does not require JavaScript code. However, still, some custom JavaScript is needed to toggle their visibility. We can easily change the sizing, appearance, and alignment of the spinner without using any utility class.

Default/Border Spinner – To create a spinner, add .spinner-border class along with the role =”status” attribute value pair in the parent <div> element. The .sr class is used inside the nested <span> element that makes the content visible on the screen readers.

Syntax

Example

Output

Bootstrap Spinners

Colored Spinner – Default/border spinner uses current-color for border-color, which means you can set the color of the spinner according to your own with the help of text color utilities. For creating colored spinner, you have to add the text color class along with the .spinner-border class.

Syntax

Example

Output

Bootstrap Spinners

Growing Spinners – The growing spinners repeatedly fade in (grow) and then fade out instead of spinning. Like border spinners, you can also change or set the color of the growing spinner according to you with the help of text color utilities.

The .spinner grow class is used to create growing spinners.

Syntax

Example

 Output

Bootstrap Spinners

Spinner Buttons – We use spinners with buttons so that we can show whether the action is still in processing or has been done. We can remove the text from the button as per our need and also disable the button by using a disable attribute within the <button> element.

Syntax

Example

Output

Bootstrap Spinners

Pin It on Pinterest

Share This