tabler/docs/content/ui/components/placeholder.mdx

---
title: Placeholder
summary: Placeholder is used to reserve space for content that will soon appear in a layout.
description: Reserve space for loading content with placeholders. Use lines, headings, and image blocks to build skeleton screens.
related: [/ui/components/spinner, /ui/components/empty]
source: core/scss/ui/_placeholder.scss
sass-vars: placeholder
classnames:
  component:
    - class: placeholder
      desc: Grey block standing in for content that is still loading
  behavior:
    - class: placeholder-glow
      desc: Fades the placeholders inside it, applied to the wrapper
    - class: placeholder-wave
      desc: Sweeps a highlight across them, applied to the wrapper
  size:
    - class: placeholder-xs
      desc: Extra small, for a caption line
    - class: placeholder-sm
      desc: Small
    - class: placeholder-lg
      desc: Large, for a heading line
---
import Example from '@components/Example.astro';

## Placeholder line

Placeholder lines can contain lines of text. Their length is different and depends on the `col-` class.

<Example column>
<div class="placeholder col-9"></div>
<div class="placeholder col-11"></div>
<div class="placeholder col-10"></div>
<div class="placeholder col-8"></div>
</Example>

Use `col-12` for lines that will span the whole width:

<Example column>
<div class="placeholder col-12"></div>
<div class="placeholder col-12"></div>
<div class="placeholder col-12"></div>
<div class="placeholder col-12"></div>
</Example>

You can also move the lines to the right or center them:

<Example column>
<div class="text-end">
  <div class="placeholder col-11"></div>
  <div class="placeholder col-10"></div>
  <div class="placeholder col-8"></div>
</div>
<div class="text-center mt-3">
  <div class="placeholder col-11"></div>
  <div class="placeholder col-10"></div>
  <div class="placeholder col-8"></div>
</div>
</Example>

## Placeholder heading

A placeholder can also contain an element that looks like a header:

<Example column>
<div class="placeholder col-9 mb-3"></div>
<div class="placeholder placeholder-xs col-10"></div>
<div class="placeholder placeholder-xs col-11"></div>
</Example>

## Placeholder avatar

You can use a placeholder that will look like an [avatar](/ui/components/avatar). You can use the `avatar` component, and get the image in the right proportions.

<Example column>
<div class="row">
  <div class="col-auto"><div class="avatar placeholder"></div></div>
  <div class="col">
    <div class="placeholder col-9"></div>
    <div class="placeholder col-11"></div>
  </div>
</div>
</Example>

The avatar size classes work here too:

<Example centered>
<div class="avatar-list">
  <div class="avatar avatar-xl placeholder"></div>
  <div class="avatar avatar-lg placeholder"></div>
  <div class="avatar placeholder"></div>
  <div class="avatar avatar-sm placeholder"></div>
  <div class="avatar avatar-xs placeholder"></div>
</div>
</Example>

## Placeholder image

You can use a placeholder that will look like a picture. You can use the `ratio` component, and get the image in the right proportions.

<Example column centered vertical>
<div class="ratio ratio-1x1 placeholder"></div>
<div class="ratio ratio-4x3 placeholder"></div>
<div class="ratio ratio-16x9 placeholder"></div>
<div class="ratio ratio-21x9 placeholder"></div>
</Example>

## Placeholder color

By default, the placeholder uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.

<Example column>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
</Example>

## Placeholder sizing

The sizes of placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.

<Example column>
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>
</Example>

## Animation

Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.

<Example column>
<p class="placeholder-glow"><span class="placeholder col-12"></span></p>
<p class="placeholder-wave"><span class="placeholder col-12"></span></p>
</Example>

## Live examples

See in the following examples how else you can use the placeholder component

<Example column centered vertical>
<div class="card placeholder-glow">
  <div class="ratio ratio-21x9 card-img-top placeholder"></div>
  <div class="card-body">
    <div class="placeholder col-9 mb-3"></div>
    <div class="placeholder placeholder-xs col-10"></div>
    <div class="placeholder placeholder-xs col-11"></div>
    <div class="mt-3">
      <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
    </div>
  </div>
</div>
<div class="card">
  <div class="row g-0 align-items-center placeholder-glow">
    <div class="col-3"><div class="ratio ratio-1x1 card-img-start placeholder"></div></div>
    <div class="col">
      <div class="card-body">
        <div class="placeholder col-9 mb-3"></div>
        <div class="placeholder placeholder-xs col-10"></div>
        <div class="placeholder placeholder-xs col-11"></div>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-auto"><div class="avatar avatar-rounded placeholder"></div></div>
      <div class="col">
        <div class="placeholder placeholder-xs col-9"></div>
        <div class="placeholder placeholder-xs col-7"></div>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body py-5 text-center">
    <div><div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div></div>
    <div class="w-75 mx-auto">
      <div class="placeholder col-9 mb-3"></div>
      <div class="placeholder placeholder-xs col-10"></div>
    </div>
  </div>
</div>
<div class="card">
  <ul class="list-group list-group-flush placeholder-glow">
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto"><div class="avatar avatar-rounded placeholder"></div></div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto"><div class="avatar avatar-rounded placeholder"></div></div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto"><div class="avatar avatar-rounded placeholder"></div></div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto"><div class="avatar avatar-rounded placeholder"></div></div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
  </ul>
</div>
</Example>

## Accessibility

- A placeholder is a picture of content that is not there yet. Hide it from screen readers with `aria-hidden="true"` and mark the container `aria-busy="true"`, so the reader waits for the real thing.
- Announce the load from one live region, not from the placeholder itself. Otherwise every skeleton block is announced separately.
- `placeholder-glow` and `placeholder-wave` animate continuously. Turn them off under `prefers-reduced-motion`.
- Keep the layout of the placeholder close to the real content, so nothing jumps when it arrives.