Spinners

Border Spinners

Use class .border-spinners for 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-grow for 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-flex and .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-border or .spinner-grow inside buttons to indicate an action is currently processing or taking place

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder