React-Bootstrap Placeholder

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 =
    "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 */}
                    <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:

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:

Output