Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Bootstrap Spinners documentationColors
The border spinner uses currentColor
for its border-color
, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.
Why not use
border-color
utilities? Each border spinner specifies atransparent
border for at least one side, so.border-{color}
utilities would override that.
Growing spinner
If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
Once again, this spinner is built with currentColor
, so you can easily change its appearance with text color utilities. Here it is in blue, along with the supported variants.
Alignment
Spinners in Bootstrap are built with rem
s, currentColor
, and display: inline-flex
. This means they can easily be resized, recolored, and quickly aligned.
Placement
Use flexbox utilities , float utilities , or text alignment utilities to place spinners exactly where you need them in any situation.