Components

Skeleton

A shimmering placeholder for content that is still loading. The base ds-skeleton sweeps a grey gradient across a flat (no-radius) bar. Variants size it as text, a full-width line, a square block, or a generic block. Animation is suppressed under prefers-reduced-motion.

Variants

Text lines, a full-width line, and a generic block. The shimmer animates automatically.

text · line · block

<span class="ds-skeleton ds-skeleton--text" style="width:60%"></span>
<span class="ds-skeleton ds-skeleton--line"></span>
<span class="ds-skeleton ds-skeleton--block"></span>

Media row

A square --circle (kept sharp per the no-radius parti pris) beside stacked text lines — a typical avatar-and-name loading row.

circle · text

<div style="display:flex;gap:14px;align-items:center">
  <span class="ds-skeleton ds-skeleton--circle"></span>
  <div style="flex:1">
    <span class="ds-skeleton ds-skeleton--text" style="width:50%"></span>
    <span class="ds-skeleton ds-skeleton--text" style="width:80%"></span>
  </div>
</div>

Card placeholder

A block for the media area over a few text lines — a loading stand-in for a card.

block · text

<div class="ds-card">
  <span class="ds-skeleton ds-skeleton--block" style="height:140px"></span>
  <div class="ds-card__body">
    <span class="ds-skeleton ds-skeleton--text" style="width:70%"></span>
    <span class="ds-skeleton ds-skeleton--text"></span>
    <span class="ds-skeleton ds-skeleton--text" style="width:40%"></span>
  </div>
</div>

React

The Skeleton component picks a variant, accepts inline width/height, and renders N stacked lines via count.

import { Skeleton } from "@diametral/design-system/react";

<Skeleton variant="circle" />
<Skeleton variant="line" width="60%" />
<Skeleton variant="text" count={3} />