Border Spinners
Use class .spinner-border
for a lightweight loading indicator.
Colored Spinners
You can customize the color with text color utilities. You can use any of our text color utilities on the
standard spinner. Use .text-{color}
Growing Spinner
Use class .spinner-grow
for a growing spinner.
Colored Growing Spinners
You can customize the color with text color utilities. You can use any of our text color utilities on the
standard spinner. Use .text-{color}
Flex
Use Flexbox utilities to place spinners.Use .d-flex
and .align-items-{side}
.
Float
You can also use Float to place your spinner .float-{side}
.
Text Alignment
You can also use .text-{side}
for your spinner's placement.
Sizes
Use .spinner-border-sm
and .spinner-grow-sm
for small sized spinner. For large
spinner, you need to add inline style.
Buttons
Use .spinner-border
or .spinner-grow
inside buttons to indicate an action is
currently processing or taking place.