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.

Loading...
<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.

<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.

<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.

<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.

Loading...
<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

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

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

Text align

Loading...
<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.

<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.

<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.

<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>
<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>