Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Border spinner

Use the border spinners for a lightweight loading indicator. Set animation="border" to use it.

Design

Code

<Spinner animation="border" role="status">
    <span className="visually-hidden">Loading...</span>
</Spinner>

Colors

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

Design

Code

<Spinner animation="border" variant="primary" className="me-2" />
<Spinner animation="border" variant="secondary" className="me-2" />
<Spinner animation="border" variant="success" className="me-2" />
<Spinner animation="border" variant="danger" className="me-2" />
<Spinner animation="border" variant="warning" className="me-2" />
<Spinner animation="border" variant="info" className="me-2" />
<Spinner animation="border" variant="light" className="me-2" />
<Spinner animation="border" variant="dark" />

Growing spinner

Set animation="grow" to use it.

Design

Code

<Spinner animation="grow" />

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

Design

Code

<Spinner animation="grow" variant="primary" className="me-2" />
<Spinner animation="grow" variant="secondary" className="me-2" />
<Spinner animation="grow" variant="success" className="me-2" />
<Spinner animation="grow" variant="danger" className="me-2" />
<Spinner animation="grow" variant="warning" className="me-2" />
<Spinner animation="grow" variant="info" className="me-2" />
<Spinner animation="grow" variant="light" className="me-2" />
<Spinner animation="grow" variant="dark" />

Alignment

Spinners in Bootstrap are built with rems, variant prop etc... This means they can easily be resized, recolored, and quickly aligned.

Margin

Use margin utilities like .m-5 for easy spacing.

Design

Code

<Spinner animation="border" role="status" className="m-5">
    <span className="visually-hidden">Loading...</span>
</Spinner>

Placement

Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.

Flex

Design

Code

<div className="d-flex justify-content-center">
    <Spinner animation="border" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
</div>

Design

Code

Loading...

<div className="d-flex  align-items-center">
    <strong>Loading...</strong>
    <Spinner animation="border" role="status" className="ms-auto">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
</div>

Floats

Design

Code

<Spinner animation="border" role="status" className="float-end">
    <span className="visually-hidden">Loading...</span>
</Spinner>

Text align

Design

Code

<div className="text-center">
    <Spinner animation="border" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
</div>

Size

Add size="sm" to make a smaller spinner that can quickly be used within other components.

Design

Code

<Spinner animation="border" size="sm" className="me-2"/> 
<Spinner animation="grow" size="sm" />

Or, use custom CSS or inline styles to change the dimensions as needed.

Design

Code

<Spinner animation="border" style={{ width: '3rem', height: '3rem' }} className="me-2" />
<Spinner animation="grow" style={{ width: '3rem', height: '3rem' }} />

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.

Design

Code

<Button variant="primary" disabled className="me-2">
    <Spinner
        as="span"
        animation="border"
        size="sm"
        role="status"
        aria-hidden="true"
    />
    <span className="visually-hidden">Loading...</span>
    </Button>
    <Button variant="primary" disabled>
    <Spinner
        as="span"
        animation="border"
        size="sm"
        role="status"
        aria-hidden="true"
    />
    Loading...
</Button>

Design

Code

<Button variant="primary" disabled className="me-2">
    <Spinner
        as="span"
        animation="grow"
        size="sm"
        role="status"
        aria-hidden="true"
    />
    <span className="visually-hidden">Loading...</span>
</Button>
<Button variant="primary" disabled>
    <Spinner
        as="span"
        animation="grow"
        size="sm"
        role="status"
        aria-hidden="true"
    />
    Loading...
</Button>