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.
Spinnerview source file
import Spinner from 'react-bootstrap/Spinner'Copy import code for the Spinner component
Changes the animation style of the spinner.
You can use a custom element type for this component.
This component may be used to wrap child elements or components.
An ARIA accessible role applied to the Menu component. This should generally be set to 'status'
Component size variations.
The visual color style of the spinner
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.