Stisla

Placeholders

A skeleton stand-in for content that hasn't loaded yet.

Example

The same card in two states. The loading card mirrors the real card's layout so nothing jumps when content arrives. Wrap the skeleton tree in .text-muted-foreground so bars sit on a muted gray instead of the high-contrast body color.

Quarterly review

Wraps up the metrics, customer wins, and what's queued for next quarter.

Open report 
<div class="demo-grid">
  <div class="card">
    <div class="card__body">
      <h5 class="card__title">Quarterly review</h5>
      <p class="card__text">Wraps up the metrics, customer wins, and what's queued for next quarter.</p>
      <a href="#" class="btn btn--primary">Open report</a>
    </div>
  </div>
  <div class="card" aria-hidden="true">
    <div class="card__body text-muted-foreground">
      <h5 class="card__title placeholder--glow">
        <span class="placeholder" style="width: 50%"></span>
      </h5>
      <p class="card__text placeholder--glow">
        <span class="placeholder" style="width: 60%"></span>
        <span class="placeholder" style="width: 30%"></span>
        <span class="placeholder" style="width: 30%"></span>
        <span class="placeholder" style="width: 50%"></span>
        <span class="placeholder" style="width: 70%"></span>
      </p>
      <span class="btn btn--primary placeholder" aria-disabled="true" style="width: 6rem"></span>
    </div>
  </div>
</div>

Basic

Apply .placeholder to any inline element and size it via an inline style. The bar fills with the current text color at half opacity and shows a wait cursor.

<p class="text-muted-foreground m-0" aria-hidden="true">
  <span class="placeholder" style="width: 50%"></span>
</p>

Sizes

Three height modifiers sit alongside the default. .placeholder--xs and .placeholder--sm trim the bar for inline captions; .placeholder--lg bulks it up for headings.

<div class="text-muted-foreground" aria-hidden="true">
  <span class="placeholder placeholder--lg" style="width: 100%"></span>
  <span class="placeholder" style="width: 100%"></span>
  <span class="placeholder placeholder--sm" style="width: 100%"></span>
  <span class="placeholder placeholder--xs" style="width: 100%"></span>
</div>

Colors

Recolor with any .text-* utility. The default picks up the current text color; wrap in .text-muted-foreground for the muted gray used everywhere else on this page.

<div aria-hidden="true">
  <span class="placeholder text-muted-foreground" style="width: 100%"></span>
  <span class="placeholder text-primary" style="width: 100%"></span>
  <span class="placeholder text-success" style="width: 100%"></span>
  <span class="placeholder text-danger" style="width: 100%"></span>
  <span class="placeholder text-warning" style="width: 100%"></span>
  <span class="placeholder text-info" style="width: 100%"></span>
</div>

Animation

Wrap a group in .placeholder--glow for a pulsing opacity loop, or .placeholder--wave for a shimmer that sweeps left to right.

<div class="demo-stack text-muted-foreground" aria-hidden="true">
  <p class="placeholder--glow m-0">
    <span class="placeholder" style="width: 100%"></span>
    <span class="placeholder" style="width: 70%"></span>
  </p>
  <p class="placeholder--wave m-0">
    <span class="placeholder" style="width: 100%"></span>
    <span class="placeholder" style="width: 70%"></span>
  </p>
</div>

Buttons

Apply .placeholder to a .btn to render an unlabeled stand-in. Mirror the variant of the real button so the swap doesn't shift the layout.

<div class="demo-row">
  <span class="btn btn--primary placeholder" aria-disabled="true" style="width: 6rem"></span>
  <span class="btn btn--outline btn--neutral placeholder" aria-disabled="true" style="width: 4rem"></span>
</div>

Customization

Three variables retune .placeholder without touching component CSS. Override on .placeholder itself, on a parent scope, or on :root. The cascade scopes the change.

Variable Default Use
--placeholder-opacity 0.5 Opacity applied over currentColor
--placeholder-radius var(--st-radius-sm) Corner radius (per-component override via --st-placeholder-radius)
--placeholder-height 1em Block height; size modifiers reassign this