Bootstrap 4 Spinners |
In order to create lightweight bordered spinner, include .spinner-border class to your element.
<div class="container"> <div class="spinner-border"></div> </div>
Demo
Color Variations
You can create spinners with different color variations like below example,Growing Spinners
In order to create a growing spinner instead of border spinner, Use .spinner-grow class along with text color utilities to change its appearance.Let's look into a detailed example,
Spinner Alignment
The Spinners can be aligned using margin utilities like below example,Spinner Size
- To create smaller spinner, Add .spinner-border-sm or .spinner-grow-sm class to your element.
- For custom size, Use inline, internal or external CSS styles to change the dimensions based on your need by using the height and width property.
Buttons with Border Spinner
The button spinners are an extraordinary way to show the user that current actions are under processing, you need to wait until the process is done.
Here's an example of button spinners,
Comments