ReactBootstrap Placeholder (original) (raw)

React-Bootstrap Placeholder

Last Updated : 25 Jul, 2024

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:

**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 = "https://media.geeksforgeeks.org/gfg-gg-logo.svg" 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 /} {/ used to Display placeholder text /} {/ Placeholder for the card text with a wave animation /} {/ Used to Display a placeholder text /} {/ Used to Display a placeholder button */} <Placeholder.Button variant="primary" xs={6} /> </Card.Body> ); }

export default App;

**Output:

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" }}>

Comments:

<Card.Body> {/* Placeholder for the card text with a wave animation /} {/ Used to Display a placeholder text /} {/ Used to Display a placeholder button */} <Placeholder.Button variant="primary" xs={6} /> </Card.Body> ); }

export default App;

Output:

Output