Buzz
In Bootstrap 4, a new component called Spinner has been added to display loading states. Refer to the article below by Mytour for detailed insights into Bootstrap Spinners.
Exploring Bootstrap Spinners
1. Creating Spinners in Bootstrap
Spinners are icons indicating loading states, such as application or website loading. They are developed based on HTML and CSS. However, to display or hide spinners on a webpage, we need to use custom JavaScript.
Additionally, we can easily customize the appearance, size, and alignment of spinners using predefined utility classes.
To create a spinner, we use the .spinner-border class, as shown in the example below:
The output result appears as follows:
Use the .sr-only class to hide an element on all devices except screen readers.
2. Creating Spinners with Different Colors
By using color utility classes to customize the spinner's color as shown in the example below:
The output result looks like the following:
3. Creating Dynamic Spinners
In addition, we can generate dynamic spinners, displaying an icon and then fading away.
Example: The illustration below demonstrates how to create an animated spinner in Bootstrap:
The output result looks like the following:
Similarly, we can customize the colors of animated spinners using color utility classes as shown in the example below:
The output result appears as follows:
4. Spinner Size
By using the .spinner-border-sm and .spinner-grow-sm classes to create smaller spinners, commonly used in other components such as buttons.
Example: In the example below, it demonstrates how to adjust the spinner size in Bootstrap:
The output result looks like the following:
Alternatively, we can use custom CSS to modify the spinner size.
The output result looks like the following:
5. Adding Spinners to Buttons in Bootstrap
By incorporating spinners into buttons, users can easily visualize the current action or task being processed.
Example: In the example below, it demonstrates adding spinners to disabled buttons:
The output result looks like the following:
6. Aligning Spinners in Bootstrap
To align spinners in Bootstrap to the left, right, or center, we use text alignment classes, flexbox classes, or float classes.
Example: The example below illustrates how to align spinners in Bootstrap:
The output result appears as follows:
In this Bootstrap tutorial, Mytour has just introduced you to Spinners in Bootstrap. In the next tutorial, Mytour will continue to introduce you to Jumbotron in Bootstrap.
Additionally, readers can explore other articles on Mytour to learn more about Pagination in Bootstrap.
