Spinners can be used to show the loading state in your projects.
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 -
Grow Spinner -
All standard visual variants are available for both animation styles by
variant property. Alternatively spinners can be custom
sized with the
style property, or custom CSS classes.
In addition to the standard size, a smaller additional preconfigured
size is available by configuring the
size property to
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.
To ensure the maximum accessibility for spinner components it is
recommended you provide a relevant ARIA
and include screenreader-only readable text representation of the
spinner's meaning inside the component using Bootstrap's
The example below provides an example of accessible usage of this component.