Skip to main content

Spinners

Spinners can be used to show the loading state in your projects.

Example

Result
Loading...
Live Editor

Animations

Bootstrap offers two animation styles for spinners. The animation style can be configured with the animation property. An animation style must always be provided when creating a spinner.

Border Spinner - border

Result
Loading...
Live Editor

Grow Spinner - grow

Result
Loading...
Live Editor

Variants

All standard visual variants are available for both animation styles by setting the variant property. Alternatively spinners can be custom sized with the style property, or custom CSS classes.

Result
Loading...
Live Editor

Sizing

In addition to the standard size, a smaller additional preconfigured size is available by configuring the size property to sm.

Result
Loading...
Live Editor

Buttons

Like the original Bootstrap spinners, these can also be used with buttons. To use this component out-of-the-box it is recommended you change the element type to span by configuring the as property when using spinners inside buttons.

Result
Loading...
Live Editor

Accessibility

To ensure the maximum accessibility for spinner components it is recommended you provide a relevant ARIA role property, and include screenreader-only readable text representation of the spinner's meaning inside the component using Bootstrap's visually-hidden class.

The example below provides an example of accessible usage of this component.

Result
Loading...
Live Editor

API

Spinner