Developed by Codescandy

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.

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

Colors

The border spinner uses currentColor for its border-color , meaning you can customize the color withtext color utilities. You can use any of our text color utilities on the standard spinner.

<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

<Spinner animation="grow" />

Once again, this spinner is built with currentColor , so you can easily change its appearance withtext color utilities. Here it is in blue, along with the supported variants.

<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 rem s, currentColor , and display: inline-flex . This means they can easily be resized, recolored, and quickly aligned.

Margin

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

<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

Use .d-flex and flex property to make placement.

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

Floats

Use float utilities to make placement.

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

Text align

Use text alignment utilities to make placement.

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

Size

Add .spinner-border-sm and .spinner-grow-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" />
<Spinner
    animation="border"
    style={{ width: "3rem", height: "3rem" }}
    className="me-2"
/>
<Spinner
    animation="grow"
    style={{ width: "3rem", height: "3rem" }}
/>

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