React-Bootstrap Placeholder is used to make the content loading experience better for users. These placeholders not only enhance the user experience but also help us maintain the page looks and structure, even if the content hasn’t loaded yet.
React-Bootstrap Placeholder classes used:
- Width: The “width” property in the Placeholder component lets you define the horizontal size of the placeholder, enabling fixed widths like “100px” to influence the placeholder’s display width in your UI.
- Color: The “color” property in the Placeholder component defines the background color of the placeholder.
- Sizing: The “sizing” property in the Placeholder component manages the height of the placeholder with options like “xs,” “sm,” etc.
- Animation: The “animation” property in the Placeholder component lets you control placeholder animations for a more engaging loading experience. Two animation properties glow and wave.
Syntax:
<Placeholder as={Card.Title} animation="glow/wave">
<Placeholder xs={6} />
</Placeholder>
Example: This example uses wave animation using React Bootstrap Placeholder
Javascript
// App.js File import React from "react" ;
import Card from "react-bootstrap/Card" ;
import Placeholder from "react-bootstrap/Placeholder" ;
const img = function App() {
return (
<div
className= "d-flex justify-content-around
align-items-center bg-warning"
style={{ height: "100vh" }}>
<Card style={{ width: "20rem" }}>
<Card.Img variant= "top"
src={img} className= "p-4" />
<Card.Body>
{ /* Placeholder for the card title
with a wave animation */ }
<Placeholder as={Card.Title}
animation= "wave" >
{ /* used to Display
placeholder text */ }
<Placeholder xs={6} />
</Placeholder>
{ /* Placeholder for the card
text with a wave animation */ }
<Placeholder as={Card.Text}
animation= "wave" >
{ /* Used to Display a
placeholder text */ }
<Placeholder xs={7} />
<Placeholder xs={4} />
<Placeholder xs={4} />
<Placeholder xs={6} />
<Placeholder xs={8} />
</Placeholder>
{ /* Used to Display a
placeholder button */ }
<Placeholder.Button
variant= "primary" xs={6} />
</Card.Body>
</Card>
</div>
);
} export default App;
|
Output:
Example 2: This example uses glow animation using React Bootstrap Placeholder
Javascript
// App.js File import React from "react" ;
import Card from "react-bootstrap/Card" ;
import Placeholder from "react-bootstrap/Placeholder" ;
function App() {
return (
<div
className= "bg-warning d-flex justify-content-around
align-items-center"
style={{ height: "100vh" }}>
<Card style={{ width: "28rem" }}>
<p className= "m-1 h5" >Comments:</p>
<input className= "m-2" type= "text" placeholder= "" />
<Card.Body>
{ /* Placeholder for the card
text with a wave animation */ }
<Placeholder as={Card.Text}
animation= "wave" >
{ /* Used to Display a
placeholder text */ }
<Placeholder xs={7} />
<Placeholder xs={4} />
<Placeholder xs={4} />
<Placeholder xs={6} />
<Placeholder xs={8} />
</Placeholder>
{ /* Used to Display a
placeholder button */ }
<Placeholder.Button
variant= "primary" xs={6} />
</Card.Body>
</Card>
</div>
);
} export default App;
|
Output: