# Placeholder

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

Source: https://bootstrap-svelte.vercel.app/components/placeholder — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## 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.

![...](https://placehold.co/300x180)

##### Card title

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

Go somewhere

```html
<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.

```html
<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.

```html
<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`.

```html
<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

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

### Wave

```html
<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