Spinners

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

    Press esc to disable tab trapping

    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

    Press esc to disable tab trapping

    Grow Spinner - grow

    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping

    Sizing

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

    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping

    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 sr-only class.

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

    Press esc to disable tab trapping

    API

    Spinnerview source file

    import Spinner from 'react-bootstrap/Spinner'
    NameTypeDefaultDescription
    animation required
    'border' | 'grow'
    		true

    Changes the animation style of the spinner.

    as
    elementType
    		<div>

    You can use a custom element type for this component.

    children
    element

    This component may be used to wrap child elements or components.

    role
    string

    An ARIA accessible role applied to the Menu component. This should generally be set to 'status'

    size
    'sm'

    Component size variations.

    variant
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'

    The visual color style of the spinner

    bsPrefix required
    string
    		'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.