Placeholder

Skeleton placeholders provide a visual preview of content that is still loading, reducing user anxiety during wait times.

Basic Usage

By default, renders as an inline <span> element with auto width.

<TPlaceholder width="7"/>
<TPlaceholder width="4"/>
<TPlaceholder width="10"/>

Width

Use the width prop to set the column span (1–12), mapped to Tabler's col-{n} grid system. Values outside the range are clamped automatically.

<TPlaceholder width="12"/>
<TPlaceholder width="8"/>
<TPlaceholder width="4"/>
<TPlaceholder width="2"/>

Size

The size prop controls the line height: lg, default (medium), sm, xs.

<TPlaceholder width="8" size="lg"/>
<TPlaceholder width="8"/>
<TPlaceholder width="8" size="sm"/>
<TPlaceholder width="8" size="xs"/>

Color

The color prop sets the background color, supporting all Tabler preset colors.

<TPlaceholder width="8" color="blue"/>
<TPlaceholder width="8" color="red"/>
<TPlaceholder width="8" color="green"/>

Avatar Placeholder

The avatar prop renders a circular avatar skeleton, supporting sizes: xl, lg, default, sm, xs.

<TPlaceholder avatar="xl"/>
<TPlaceholder avatar="lg"/>
<TPlaceholder avatar/>
<TPlaceholder avatar="sm"/>
<TPlaceholder avatar="xs"/>

Image Placeholder

The image prop renders an image skeleton container, supporting aspect ratios: 1x1, 4x3, 16x9, 21x9.

<div style="width: 120px">
  <TPlaceholder image="1x1"/>
</div>
<div style="width: 160px">
  <TPlaceholder image="4x3"/>
</div>
<div style="width: 160px">
  <TPlaceholder image="16x9"/>
</div>
<div style="width: 160px">
  <TPlaceholder image="21x9"/>
</div>

Animation

The animation prop enables skeleton animation effects. Two modes are available: glow (shimmering sweep) and wave ( pulsing wave).

<TPlaceholder width="12" animation="glow"/>
<TPlaceholder width="12" animation="wave"/>

Card Skeleton

Combine multiple placeholders to simulate a complete card layout.

<div class="card">
  <div class="card-body">
    <div class="d-flex gap-3 align-items-center mb-3">
      <TPlaceholder avatar="lg"/>
      <div class="flex-grow-1">
        <TPlaceholder width="6"/>
        <TPlaceholder width="4" size="sm"/>
      </div>
    </div>
    <TPlaceholder width="12" animation="glow"/>
    <TPlaceholder width="12" animation="glow"/>
    <TPlaceholder width="8" animation="glow"/>
  </div>
</div>

API

Props

Prop	Description	Type	Default
width	Column span (1–12), clamped automatically	number	undefined
size	Line height	'lg' | 'sm' | 'xs'	undefined
color	Background color (Tabler preset)	TablerColor	undefined
avatar	Avatar skeleton, accepts boolean or size	boolean | 'xl' | 'lg' | 'sm' | 'xs'	false
image	Image skeleton, accepts boolean or aspect ratio	boolean | '1x1' | '4x3' | '16x9' | '21x9'	false
animation	Animation effect	'glow' | 'wave'	undefined