Skeleton

Loading placeholder that mirrors the final layout, with a shimmer.

Preview

React · live from the Storybook

HTML and CSS

The same component as plain HTML with pixels-ui.css, no framework needed.

HTML

<div class="px-card" style="max-width:360px;width:100%" aria-busy="true" aria-label="Loading">
  <div class="px-card__body stack">
    <div class="row" style="align-items:center"><span class="px-skeleton px-skeleton--circle"></span><div class="stack" style="flex:1;gap:8px"><span class="px-skeleton px-skeleton--heading"></span><span class="px-skeleton px-skeleton--text" style="width:40%"></span></div></div>
    <span class="px-skeleton px-skeleton--rect"></span>
    <span class="px-skeleton px-skeleton--text"></span><span class="px-skeleton px-skeleton--text" style="width:80%"></span>
    <span class="px-skeleton px-skeleton--button"></span>
  </div>
</div>

Usage

Respect prefers-reduced-motion (handled).

Installation

Included in the core files. No extra install.

HTML

<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>

API reference

Class / attribute	Type	Description
`px-skeleton--text · --heading · --circle · --rect · --button`	class	Shape.

Figma properties

Skeleton5 variants · page “Progress Bar”Open

Loading placeholder that mirrors the final layout. Animate a --px-skeleton-highlight shimmer (respect prefers-reduced-motion) and set aria-busy on the container.

Property	Type	Values
Shape	Variant	Text Heading Circle Rectangle Button

Skeleton / Card2 variants · page “Progress Bar”Open

Example composition: card loading state built from Skeleton shapes. In RTL, short last lines align to the right.

Property	Type	Values
Direction	Variant	LTR RTL

Design tokens

Component tokens from the Figma Component collection. Override them to restyle just this component.

Token	Alias	Light value
`--px-skeleton-radius`	radius-sm	4px

Accessibility

Set aria-busy="true" on the loading container.