Unlimited Access

Upgrade your plan from a Free trial, to select ‘Business Plan’. Start Now

Upgrade Now

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>