Skip to main content

Placeholder

Result
Loading...
Live Editor
<Placeholder xs={12} />

With an animation parent​

Only use the wave animation.

Result
Loading...
Live Editor
<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>

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>

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>

PlaceholderTable​

Result
Loading...
Live Editor
<Placeholder as="div" animation="wave">
  <PlaceholderTable rows={6} columns={4} />
</Placeholder>

Props​

Placeholder​

PlaceholderCircle​

PlaceholderTable​