Placeholder

Result

Loading...

Live Editor

<Placeholder xs={12} />

<Placeholder xs={12} />

With an animation parent

Only use the wave animation.

Result

Loading...

Live Editor

<Placeholder animation="wave"> <Placeholder xs={12} /> </Placeholder>

<Placeholder animation="wave">
  <Placeholder xs={12} />
</Placeholder>

Using the as prop to extend style behaviors

Result

Loading...

Live Editor

<Card style={{ width: '18rem' }}> <Card.Body> <Placeholder as={Card.Title} animation="wave"> <Placeholder xs={6} /> </Placeholder> <Placeholder as={Card.Text} animation="wave"> <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} /> <Placeholder xs={6} />{' '} <Placeholder xs={8} /> <Placeholder.Button variant="primary" xs={6} /> </Placeholder> </Card.Body> </Card>

<Card style={{ width: '18rem' }}>
  <Card.Body>
    <Placeholder as={Card.Title} animation="wave">
      <Placeholder xs={6} />
    </Placeholder>
    <Placeholder as={Card.Text} animation="wave">
      <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} /> <Placeholder xs={6} />{' '}
      <Placeholder xs={8} />
      <Placeholder.Button variant="primary" xs={6} />
    </Placeholder>
  </Card.Body>
</Card>

PlaceholderCircle

Result

Loading...

Live Editor

<Placeholder as="div" animation="wave"> <PlaceholderCircle diameter={200} /> <PlaceholderCircle diameter={100} /> <PlaceholderCircle diameter={50} /> <PlaceholderCircle diameter={25} /> <PlaceholderCircle diameter={16} /> </Placeholder>

<Placeholder as="div" animation="wave">
  <PlaceholderCircle diameter={200} />
  <PlaceholderCircle diameter={100} />
  <PlaceholderCircle diameter={50} />
  <PlaceholderCircle diameter={25} />
  <PlaceholderCircle diameter={16} />
</Placeholder>

With lineWidth

Result

Loading...

Live Editor

<Placeholder as="div" animation="wave"> <PlaceholderCircle diameter={200} lineWidth={50} /> <PlaceholderCircle diameter={100} lineWidth={25} /> <PlaceholderCircle diameter={50} lineWidth={10} /> <PlaceholderCircle diameter={25} lineWidth={5} /> <PlaceholderCircle diameter={16} lineWidth={3} /> </Placeholder>

<Placeholder as="div" animation="wave">
  <PlaceholderCircle diameter={200} lineWidth={50} />
  <PlaceholderCircle diameter={100} lineWidth={25} />
  <PlaceholderCircle diameter={50} lineWidth={10} />
  <PlaceholderCircle diameter={25} lineWidth={5} />
  <PlaceholderCircle diameter={16} lineWidth={3} />
</Placeholder>

PlaceholderTable

Result

Loading...

Live Editor

<Placeholder as="div" animation="wave"> <PlaceholderTable rows={6} columns={4} /> </Placeholder>

<Placeholder as="div" animation="wave">
  <PlaceholderTable rows={6} columns={4} />
</Placeholder>

Props

Placeholder

PlaceholderCircle

PlaceholderTable