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} aria-label="placeholder button" />
		</Placeholder>
	</Card.Body>
</Card>

With a 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>

With a PlaceholderTable​

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

Props​

Placeholder​

PlaceholderCircle​

PlaceholderTable​