Skeleton

A placeholder shape shown while content loads, or wrapped around the content so it never moves.

Avatar

A circle and two bars, the shape of a profile row.

Code

<div class="row">
  <Skeleton shape="circle" width="var(--space-12)" />
  <div class="stack">
    <Skeleton width="10rem" height="1rem" />
    <Skeleton width="7rem" height="1rem" />
  </div>
</div>

Usage

import { Skeleton } from "@elements/ui/skeleton";

<Skeleton width="12rem" />
<Skeleton shape="circle" width="var(--space-10)" />
<Skeleton shape="text" lines={3} />
<Skeleton loading={state.loading}>
  <h3>{user.name}</h3>
</Skeleton>

Examples

Card

Media and two lines inside a card.

Code

<div class="card">
  <Skeleton class="media" />           /* aspect-ratio: 16 / 9 in your CSS */
  <Skeleton width="70%" height="1rem" />
  <Skeleton width="45%" height="1rem" />
</div>

Text

shape=text draws lines of body text; the last one is shorter. With loading false it shows its content instead.

With loading false, a text skeleton shows its content.

Code

<Skeleton shape="text" lines={4} />
<Skeleton shape="text" loading={false}>
  <p>With loading false, a text skeleton shows its content.</p>
</Skeleton>

Form

A label, a field and a button.

Code

<Skeleton width="5rem" height="1rem" />
<Skeleton height="var(--control-height)" />
<Skeleton width="6rem" height="var(--control-height)" />

Table

Rows of cells.

Code

<div e:for={row of [1, 2, 3, 4]} class="grid">
  <Skeleton height="1rem" />
  <Skeleton height="1rem" />
  <Skeleton height="1rem" />
</div>

Wrapping content

The real content is laid out while hidden, so the skeleton is its exact size and nothing moves when it loads.

Code

<Skeleton shape="circle" loading={state.loading}>
  <span class="avatar">AL</span>
</Skeleton>
<Skeleton loading={state.loading}>
  <p class="name">Ada Lovelace</p>
</Skeleton>
<Skeleton loading={state.loading} inline>
  <span>Analyst, 3 projects</span>
</Skeleton>

With a control

A skeleton around a switch is the switch's exact shape, and the loaded one beside it is the same size.

Code

<div class="row">
  <Skeleton loading={true}><Switch checked={true} /></Skeleton>
  <Skeleton loading={false}><Switch checked={true} /></Skeleton>
</div>

With text

An inline skeleton around text flows with it: each line gets its own bar, and loading moves nothing.

Code

<p>
  <Skeleton inline loading={state.loading}>
    The analytical engine has no pretensions to originate anything. It can do
    whatever we know how to order it to perform.
  </Skeleton>
</p>

Size limits

minWidth, maxWidth, minHeight and maxHeight bound a fluid skeleton.

Code

<Skeleton width="100%" maxWidth="12rem" minHeight="2rem" />

Responsive and margins

Size and margin take a value per breakpoint (initial, sm, md, lg, xl, 2xl); margins take space steps 1 to 9 or any length.

Code

<!-- responsive values, on the Elements breakpoints -->
<Skeleton width={{ initial: "4rem", md: "10rem", lg: "16rem" }} height="1rem" />
<Skeleton width="8rem" height={{ initial: "1rem", md: "2rem" }} mt="3" />
<Skeleton width="6rem" height="1rem" my={{ initial: "2", md: "5" }} mx="-1" mb="1" />

Inline

A placeholder inside a sentence keeps the line height.

Last synced ago.

Last synced a moment ago.

Code

<p>Last synced <Skeleton inline width="5rem" height="1em" /> ago.</p>

RTL

Placeholders start at the inline start; the short last line of text ends early on the left.

Code

<div dir="rtl">
  <Skeleton shape="circle" width="var(--space-12)" />
  <Skeleton shape="text" lines={3} />
</div>

Reference Skeleton in the manual Every part, attribute, slot, key and data attribute.