Placeholder

Skeleton blocks that stand in for text, buttons or cards while the real content loads.

Preview

Twig

<div class="placeholder-glow">
    <twig:Tabler:Placeholder width="7" />
    <twig:Tabler:Placeholder width="4" />
    <twig:Tabler:Placeholder width="4" />
    <twig:Tabler:Placeholder width="6" />
    <twig:Tabler:Placeholder width="8" />
</div>

HTML

<div class="placeholder-glow">
    <div class="placeholder col-7"></div>
    <div class="placeholder col-4"></div>
    <div class="placeholder col-4"></div>
    <div class="placeholder col-6"></div>
    <div class="placeholder col-8"></div>
</div>

width is a grid column span: width="7" adds col-7, seven twelfths of the parent’s width. Placeholders are inline blocks, so several of them flow like words in a line of text.

The component renders a <div>: keep it out of <p> and other inline parents, where the browser would close the paragraph before it.

Sizes

Preview

Twig

<twig:Tabler:Placeholder width="12" size="lg" />
<twig:Tabler:Placeholder width="12" />
<twig:Tabler:Placeholder width="12" size="sm" />
<twig:Tabler:Placeholder width="12" size="xs" />

HTML

<div class="placeholder placeholder-lg col-12"></div>
<div class="placeholder col-12"></div>
<div class="placeholder placeholder-sm col-12"></div>
<div class="placeholder placeholder-xs col-12"></div>

Animation

Wrap placeholders in .placeholder-glow to make them pulse, or in .placeholder-wave to sweep a shine across them:

Preview

Twig

<div class="placeholder-glow mb-3">
    <twig:Tabler:Placeholder width="12" />
</div>
<div class="placeholder-wave">
    <twig:Tabler:Placeholder width="12" />
</div>

HTML

<div class="placeholder-glow mb-3">
    <div class="placeholder col-12"></div>
</div>
<div class="placeholder-wave">
    <div class="placeholder col-12"></div>
</div>

Loading card

A skeleton of a card, hidden from assistive technology with aria-hidden:

Preview

Twig

<twig:Tabler:Card aria-hidden="true">
    <twig:Tabler:Card:Body class="placeholder-glow">
        <twig:Tabler:Placeholder width="6" size="lg" class="mb-3" />
        <twig:Tabler:Placeholder width="7" />
        <twig:Tabler:Placeholder width="4" />
        <twig:Tabler:Placeholder width="4" />
        <twig:Tabler:Placeholder width="6" />
        <twig:Tabler:Placeholder width="8" />
    </twig:Tabler:Card:Body>
</twig:Tabler:Card>

HTML

<div class="card" aria-hidden="true">
    <div class="card-body placeholder-glow">
        <div class="placeholder placeholder-lg col-6 mb-3"></div>
        <div class="placeholder col-7"></div>
        <div class="placeholder col-4"></div>
        <div class="placeholder col-4"></div>
        <div class="placeholder col-6"></div>
        <div class="placeholder col-8"></div>
    </div>
</div>

Props

Prop	Type	Default	Description
width	int?	null	Column span, 1 to 12 (col-*)
size	string?	null	xs sm lg (placeholder-*); none for the default height

Other attributes go to the root <div class="placeholder">; use a w-* class for a width outside the grid.