Develop

Styles

A skeleton is a single element with the tng-skeleton class. On its own it renders a block — the most common placeholder, filling its container’s width. Set its height with --tng-skeleton-size. There is no JavaScript: the markup paints as-is, before any app hydrates.

<div class="tng-skeleton" style="--tng-skeleton-size: 140px"></div>

Default

Contrast

Shapes

The line (is-line) is a text placeholder; stack a few to suggest a paragraph. Its width comes from --tng-skeleton-size, with presets is-sm, is-md, and is-lg.

<div class="tng-skeleton is-line"></div>
<div class="tng-skeleton is-line is-lg"></div>
<div class="tng-skeleton is-line is-md"></div>
<div class="tng-skeleton is-line is-sm"></div>

Default

Contrast

The circle (is-circle) is an avatar or icon placeholder. --tng-skeleton-size sets its diameter.

<div class="tng-skeleton is-circle"></div>
<div
  class="tng-skeleton is-circle"
  style="--tng-skeleton-size: 56px"
></div>

Default

Contrast

Motion

Skeletons are static by default. While the component is in quarantine, two motion treatments are exposed so the final choice can be compared in context: is-pulse breathes the fill’s opacity, and is-shimmer sweeps a highlight across it. Both collapse to a static fill under prefers-reduced-motion.

<div class="tng-skeleton is-line"></div>
<div class="tng-skeleton is-line is-pulse"></div>
<div class="tng-skeleton is-line is-shimmer"></div>

Default

Contrast

Modules

Skeleton card

A card-shaped placeholder is composed from the base shapes and the existing layout and utility classes — there is no dedicated skeleton-card class. Here tng-stack stacks the shapes, with p-md, background-subtle, border-subtle, and radius-2xs giving the card its surface.

<div
  class="tng-stack align-items-stretch | p-md background-subtle border-subtle radius-2xs"
>
  <div
    class="tng-skeleton is-pulse"
    style="--tng-skeleton-size: 140px"
  ></div>
  <div class="tng-group">
    <div
      class="tng-skeleton is-circle is-pulse"
      style="--tng-skeleton-size: 40px"
    ></div>
    <div class="tng-stack align-items-stretch" style="flex: 1">
      <div class="tng-skeleton is-line is-pulse"></div>
      <div class="tng-skeleton is-line is-pulse is-sm"></div>
    </div>
  </div>
</div>

Default

Contrast