Placeholder

Use loading placeholders for your components or pages to indicate something may still be loading.

Playground

Experiment with the Placeholder component by adjusting the options below:

Placeholder Interactive Playground

Controls

Animation Type

Glow Wave None

Width

Size

Color Variant

Number of Placeholders

3 placeholders

Preview

Code

            
            <Placeholder.Root type="glow">
    <Placeholder.Item class="col-6" />
    <Placeholder.Item class="col-10" />
    <Placeholder.Item class="col-4" />
</Placeholder.Root>

About

Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them.

Their appearance, color, and sizing can be easily customized using the provided props or utility classes.

Example

In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

            
            <div class="d-flex justify-content-around gap-3">
    <div class="card" style="width: 18rem;">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#!" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <div class="card" style="width: 18rem;" aria-hidden="true">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">
                <Placeholder.Root type="glow">
                    <Placeholder.Item class="col-6" />
                </Placeholder.Root>
            </h5>
            <p class="card-text">
                <Placeholder.Root type="glow">
                    <Placeholder.Item class="col-7" />
                    <Placeholder.Item class="col-4" />
                    <Placeholder.Item class="col-4" />
                    <Placeholder.Item class="col-6" />
                    <Placeholder.Item class="col-8" />
                </Placeholder.Root>
            </p>
            <a class="btn btn-primary disabled placeholder col-6"></a>
        </div>
    </div>
</div>

How it works

Placeholders are created using the Placeholder.Item component. If you desire to use the animation, then use the Placeholder.Root component as a container. The width can be set using a grid column class (e.g., col-6), width utility class, or inline styles.

The aria-hidden="true" attribute and aria-disabled="true" are used to indicate that elements are not interactive and should be hidden from screen readers.

Width

You can change the width of placeholders using grid column classes, width utilities, or inline styles.

            
            <p>
    <Placeholder.Item class="col-6" />
</p>
<p>
    <Placeholder.Item class="w-75" />
</p>
<p>
    <Placeholder.Item style="width: 25%;" />
</p>

Color

By default, the placeholder uses currentColor. Use the colorVariant prop to change this to contextual colors.

            
            <p>
    <Placeholder.Item class="col-12" colorVariant="primary" />
</p>
<p>
    <Placeholder.Item class="col-12" colorVariant="secondary" />
</p>
<p>
    <Placeholder.Item class="col-12" colorVariant="success" />
</p>
<p>
    <Placeholder.Item class="col-12" colorVariant="danger" />
</p>
<p>
    <Placeholder.Item class="col-12" colorVariant="warning" />
</p>
<p>
    <Placeholder.Item class="col-12" colorVariant="info" />
</p>
<p>
    <Placeholder.Item class="col-12" colorVariant="light" />
</p>
<p>
    <Placeholder.Item class="col-12" colorVariant="dark" />
</p>

Sizing

The size of placeholders can be customized by setting the size prop to xs, sm, or lg.

            
            <p>
    <Placeholder.Item class="col-12" size="lg" />
</p>
<p>
    <Placeholder.Item class="col-12" />
</p>
<p>
    <Placeholder.Item class="col-12" size="sm" />
</p>
<p>
    <Placeholder.Item class="col-12" size="xs" />
</p>

Animation

Animate placeholders by setting the type prop on Placeholder.Root to either glow (default) or wave to better convey the perception of something being actively loaded.

Glow

            
            <Placeholder.Root type="glow">
    <Placeholder.Item class="col-12" />
</Placeholder.Root>

Wave

            
            <Placeholder.Root type="wave">
    <Placeholder.Item class="col-12" />
</Placeholder.Root>

API Reference

Placeholder.Root Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`type`	`'glow' \| 'wave' \| undefined`	`'glow'`	Animation type for the placeholder. Use 'glow' or 'wave' for animated placeholders.

Placeholder.Item Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`size`	`'xs' \| 'sm' \| 'lg' \| undefined`	-	Size of the placeholder
`colorVariant`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'light' \| 'dark' \| undefined`	-	Contextual color variant for the placeholder

CSS Classes

The component applies Bootstrap's placeholder classes based on the provided props:

placeholder - Applied to Placeholder.Item
placeholder-{size} - Applied when size prop is set (xs, sm, lg)
placeholder-{variant} - Applied when variant prop is set (primary, secondary, etc.)
placeholder-glow - Applied to Placeholder.Root when type="glow"
placeholder-wave - Applied to Placeholder.Root when type="wave"
col-* - Bootstrap grid column classes can be applied to control width
w-* - Bootstrap width utility classes can be applied to control width