Placeholders

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

React Bootstrap docs

Width

import Placeholder from 'react-bootstrap/Placeholder'

{/* Width via col-* attribute */}
<Placeholder xs={6} />

{/* Width via w-* class */}
<Placeholder className='w-75' />

{/* Width via style attribute */}
<Placeholder style={{ width: '33%' }} />

Color

import Placeholder from 'react-bootstrap/Placeholder'

{/* Default */}
<Placeholder xs={12} />

{/* Primary */}
<Placeholder xs={12} bg='primary' />

{/* Accent */}
<Placeholder xs={12} bg='accent' />

{/* Success */}
<Placeholder xs={12} bg='success' />

{/* Danger */}
<Placeholder xs={12} bg='danger' />

{/* Warning */}
<Placeholder xs={12} bg='warning' />

{/* Info */}
<Placeholder xs={12} bg='info' />

{/* Light */}
<Placeholder xs={12} bg='light' />

{/* Dark */}
<Placeholder xs={12} bg='dark' />

Sizing

import Placeholder from 'react-bootstrap/Placeholder'

{/* Large */}
<Placeholder xs={12} size='lg' />

{/* Default */}
<Placeholder xs={12} />

{/* Small */}
<Placeholder xs={12} size='sm' />

{/* Extra small */}
<Placeholder xs={12} size='xs' />

Animation

import Placeholder from 'react-bootstrap/Placeholder'

{/* Glow animation */}
<Placeholder as='p' animation='glow'>
  <Placeholder xs={12} />
</Placeholder>

{/* Wave animation */}
<Placeholder as='p' animation='wave'>
  <Placeholder xs={12} />
</Placeholder>

Use case example

import Card from 'react-bootstrap/Card'
import Placeholder from 'react-bootstrap/Placeholder'

{/* Loading card placeholder example */}
<Card className='border-0 shadow'>
  <Placeholder as='div' animation='wave' className='position-relative'>
    <Placeholder as='div' className='card-img-top ratio ratio-16x9' />
    <i className='fi-image position-absolute top-50 start-50 translate-middle fs-1 opacity-40'></i>
  </Placeholder>
  <Card.Body>
    <Placeholder as='h5' animation='glow' className='card-title'>
      <Placeholder xs={6} />
    </Placeholder>
    <Placeholder as='p' animation='glow' className='card-text'>
      <Placeholder size='sm' xs={7} className='me-2' />
      <Placeholder size='sm' xs={4} />
      <Placeholder size='sm' xs={4} className='me-2' />
      <Placeholder size='sm' xs={6} />
      <Placeholder size='sm' xs={8} />
    </Placeholder>
    <Placeholder.Button xs={6} aria-hidden='true' className='placeholder-wave' />
  </Card.Body>
</Card>