← →

Skeleton

The Skeleton is a native web component that displays a placeholder with a shimmer effect while the real content is still loading. Use it to reserve space for text, images, or avatars and reduce the perceived wait. It respects prefers-reduced-motion, swapping the shimmer for a subtle pulse.

Preview

<div style="display:flex;align-items:center;gap:16px;margin-bottom:16px">
  <pura-skeleton circle width="48px"></pura-skeleton>
  <div style="flex:1;display:flex;flex-direction:column;gap:8px">
    <pura-skeleton width="40%"></pura-skeleton>
    <pura-skeleton width="70%"></pura-skeleton>
  </div>
</div>
<pura-skeleton height="160px"></pura-skeleton>

Attributes

Attribute	Type	Default	Description
`width`	string (CSS length)	100%	Width of the placeholder, in any CSS unit (e.g. 200px, 60%).
`height`	string (CSS length)	1em	Height of the placeholder, in any CSS unit (e.g. 16px, 2rem).
`circle`	boolean	false	Renders the placeholder as a circle (full border-radius and 1:1 aspect-ratio), ideal for avatars.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/skeleton.js"></script>

JavaScript

import "./pura/lib/skeleton.js";