Spinners

Indicate the loading state of a component or page.

Border spinner

import Spinner from 'react-bootstrap/Spinner'

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

      <Spinner animation="border" variant="body-tertiary" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

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

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

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

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

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

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

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

      <Spinner animation="border" variant="dark" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>
    </>
  )
}

Growing spinner

import Spinner from 'react-bootstrap/Spinner'

export default function SpinnersGrowingDemo() {
  return (
    <>
      <Spinner animation="grow" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="body-tertiary" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="primary" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="secondary" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="success" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="danger" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="warning" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="info" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="light" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" variant="dark" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>
    </>
  )
}

Sizing

import Spinner from 'react-bootstrap/Spinner'

export default function SpinnersSizingDemo() {
  return (
    <>
      <Spinner animation="border" size="sm" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" size="sm" role="status" className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="border" role="status" style={{ width: '3rem', height: '3rem' }} className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>

      <Spinner animation="grow" role="status" style={{ width: '3rem', height: '3rem' }} className="m-2">
        <span className="visually-hidden">Loading...</span>
      </Spinner>
    </>
  )
}

Inside button

import Spinner from 'react-bootstrap/Spinner'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function SpinnersInsideButtonDemo() {
  return (
    <Stack direction="horizontal" gap={4} className="flex-wrap">
      <Stack direction="horizontal" gap={2}>
        <Button variant="primary" className="btn-icon pe-none">
          <Spinner animation="border" size="sm" role="status" aria-hidden="true">
            <span className="visually-hidden">Loading...</span>
          </Spinner>
        </Button>
        <Button variant="primary" className="pe-none">
          <Spinner animation="border" size="sm" role="status" aria-hidden="true" className="me-2" />
          Loading...
        </Button>
      </Stack>

      <Stack direction="horizontal" gap={2}>
        <Button variant="outline-secondary" className="btn-icon pe-none">
          <Spinner animation="grow" size="sm" role="status" aria-hidden="true">
            <span className="visually-hidden">Loading...</span>
          </Spinner>
        </Button>
        <Button variant="outline-secondary" className="pe-none">
          <Spinner animation="grow" size="sm" role="status" aria-hidden="true" className="me-2" />
          Loading...
        </Button>
      </Stack>
    </Stack>
  )
}