react bootstrap 5 loading spinners example

In this tutorial, we will see loading spinners in react with bootstrap 5. We will see loading spinner animation component, grow spinner using react bootstrap 5.

Install & Setup Vite + React + Typescript + Bootstrap 5

React Bootstrap 5 Loading Spinners Example

1. Create simple react bootstrap loading spinners using react-bootstrap Spinners component.

import { Spinner } from 'react-bootstrap'

export default function LoadingSpinner() {
  return (
    <Spinner animation="border" role="status">
      <span className="visually-hidden">Loading...</span>
    </Spinner>
  )
}

loading spinners in react with bootstrap 5

2. react bootstrap 5 animation loading spinners.

import { Spinner } from 'react-bootstrap'

export default function LoadingSpinner() {
  return (
    <Spinner animation="border" />
  )
}

3. react bootstrap 5 grow loading spinners.

import { Spinner } from 'react-bootstrap'

export default function LoadingSpinner() {
  return (
    <Spinner animation="grow" />
  )
}

grow loading spinners in react with bootstrap 5

4. react bootstrap 5 loading spinners with Variants primary, secondary, success, danger, warning, info, light, dark.

import { Container, Spinner } from "react-bootstrap";

export default function LoadingSpinner() {
  return (
    <>
      <Container className="mt-5">
        <Spinner animation="border" variant="primary" />
        <Spinner animation="border" variant="secondary" />
        <Spinner animation="border" variant="success" />
        <Spinner animation="border" variant="danger" />
        <Spinner animation="border" variant="warning" />
        <Spinner animation="border" variant="info" />
        <Spinner animation="border" variant="light" />
        <Spinner animation="border" variant="dark" />
        <Spinner animation="grow" variant="primary" />
        <Spinner animation="grow" variant="secondary" />
        <Spinner animation="grow" variant="success" />
        <Spinner animation="grow" variant="danger" />
        <Spinner animation="grow" variant="warning" />
        <Spinner animation="grow" variant="info" />
        <Spinner animation="grow" variant="light" />
        <Spinner animation="grow" variant="dark" />
      </Container>
    </>
  );
}

react bootstrap 5 loading spinners variants colors

5. react bootstrap 5 loading spinners sizes.

import { Container, Spinner } from "react-bootstrap";

export default function LoadingSpinner() {
  return (
    <>
      <Container className="mt-5">
        <Spinner animation="border" size="sm" />
        <Spinner animation="border" />
        <Spinner animation="grow" size="sm" />
        <Spinner animation="grow" />
      </Container>
    </>
  );
}

react bootstrap 5 loading spinners sizes

6. react bootstrap 5 loading spinners button.

import { Button, Container, Spinner } from "react-bootstrap";

export default function LoadingSpinner() {
  return (
    <>
      <Container className="mt-5">
        <Button variant="primary" disabled>
          <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="grow"
            size="sm"
            role="status"
            aria-hidden="true"
          />
          Loading...
        </Button>
      </Container>
    </>
  );
}

react bootstrap 5 loading spinners with button