Spinners

About

Spinners are built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility.

For accessibility purposes, each loader here includes role="status" and a nested <span class="visually-hidden">Loading...</span>.

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Border spinner

Colors

Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.

Growing spinner

With colors:

Alignment

Margin

Placement

Flex

Loading...

Floats

Text align

Size

Using custom CSS or inline styles:

## Buttons