Border Spinners

Use class .border-spinnersfor a lightweight loading indicator.

Loading...

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}

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Growing Spinner

Use class .spinner-growfor a growing spinner.

Loading...

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}

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Flex

Use Flexbox utilities to place spinners.Use .d-flexand .align-items-{side}

Loading...

Float

You can also use Float to place your spinner .float-{side}

Loading...

Text Alignment

You can also use .text-{side}for your spinner's placement

Loading...

Sizes

Use .spinner-border-{sm/lg} and .spinner-grow-{sm/lg}for Small or Large spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Buttons

Use .spinner-borderor .spinner-growinside buttons to indicate an action is currently processing or taking place