Use the default border type spinners for a lightweight loading indicator.
Loading...
Colored Spinners
You can customize the color using the standard text color variants using the variant prop.
Growing Spinner
If you don't fancy a border spinner, switch to the grow spinner by setting the prop type to 'grow'. While it doesn't technically spin, it does repeatedly grow!
Loading...
Colored Growing Spinners
The variant prop translates the variant name to the Bootstrap v4 class .text-{variant}, so if you have custom defined text color variants, feel free to use them via the variant prop.
Flex
Using flex utility classes:
Loading...
Loading...
Float
Using float utility classes:
Floated Right
Text Alignment
Using text alignment utility classes:
Text Centered
Sizes
Set the prop small to true to make a smaller spinner that can quickly be used within other components.
Small SpinnerSmall Spinner
Small SpinnerSmall Spinner
Large SpinnerLarge Spinner
Buttons
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the label text out of the spinner element and utilize button text as needed.