React Bootstrap docs

Placeholders

Use placeholders for your components or pages to indicate something may still be loading.

Width

'use client'

import Placeholder from 'react-bootstrap/Placeholder'

export default function PlaceholdersWidthDemo() {
  return (
    <>
      <Placeholder xs={6} />
      <Placeholder className="w-75" />
      <Placeholder style={{ width: '33%' }} />
    </>
  )
}

Color

'use client'

import Placeholder from 'react-bootstrap/Placeholder'

export default function PlaceholdersColorsDemo() {
  return (
    <>
      <Placeholder xs={12} />
      <Placeholder xs={12} bg="primary" />
      <Placeholder xs={12} bg="secondary" />
      <Placeholder xs={12} bg="success" />
      <Placeholder xs={12} bg="danger" />
      <Placeholder xs={12} bg="warning" />
      <Placeholder xs={12} bg="info" />
      <Placeholder xs={12} bg="light" />
      <Placeholder xs={12} bg="dark" />
    </>
  )
}

Sizing

'use client'

import Placeholder from 'react-bootstrap/Placeholder'

export default function PlaceholdersSizingDemo() {
  return (
    <>
      <Placeholder xs={12} size="lg" />
      <Placeholder xs={12} />
      <Placeholder xs={12} size="sm" />
      <Placeholder xs={12} size="xs" />
    </>
  )
}

Animation

'use client'

import Placeholder from 'react-bootstrap/Placeholder'

export default function PlaceholdersAnimationDemo() {
  return (
    <>
      <Placeholder as="p" animation="glow">
        <Placeholder xs={12} />
      </Placeholder>
      <Placeholder as="p" animation="wave">
        <Placeholder xs={12} />
      </Placeholder>
    </>
  )
}

Loading card example

'use client'

import Card from 'react-bootstrap/Card'
import CardBody from 'react-bootstrap/CardBody'
import CardTitle from 'react-bootstrap/CardTitle'
import CardText from 'react-bootstrap/CardText'
import Placeholder from 'react-bootstrap/Placeholder'
import PlaceholderButton from 'react-bootstrap/PlaceholderButton'

export default function PlaceholdersLoadingCardDemo() {
  return (
    <Card style={{ maxWidth: 300 }}>
      <Placeholder as="div" animation="wave" className="position-relative">
        <Placeholder className="card-img-top ratio ratio-16x9" />
        <i className="ci-image position-absolute top-50 start-50 translate-middle fs-1 opacity-40"/>
      </Placeholder>
      <CardBody>
        <Placeholder as={CardTitle} animation="glow">
          <Placeholder xs={6} />
          <span className="visually-hidden">Card title</span>
        </Placeholder>
        <Placeholder as={CardText} animation="glow">
          <Placeholder xs={7} size="sm" className="me-2" />
          <Placeholder xs={4} size="sm" />
          <Placeholder xs={4} size="sm" className="me-2" />
          <Placeholder xs={6} size="sm" />
          <Placeholder xs={8} size="sm" />
        </Placeholder>
        <PlaceholderButton variant="primary" animation="wave" xs={6}>
          &nbsp;
        </PlaceholderButton>
      </CardBody>
    </Card>
  )
}
Top