Skeleton

A placeholder in the shape of content that has not loaded yet. It is hidden from assistive technology: announce the loading with a Spinner or a live region.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Skeleton-0.tess

<template>
  <div>
    <Skeleton shape="circle" />
    <Skeleton />
    <Skeleton />
    <Skeleton shape="block" />
  </div>
</template>

Installation

CLIManual

npmpnpmyarnbun

npx @pixelscriptio/tessera add Skeleton

pnpm exec tessera add Skeleton

yarn tessera add Skeleton

bunx @pixelscriptio/tessera add Skeleton

Works with Tessera 0.9.0 or newer.

Copy and paste the code into your project

Put it in system/components.

system/components/Skeleton.tess

<contract>
{
  "name": "Skeleton",
  "role": "generic",
  "description": "A placeholder in the shape of content that has not loaded yet. It is hidden from assistive technology: announce the loading with a Spinner or a live region.",
  "since": "0.8.0",
  "parts": ["root"],
  "variants": {
    "shape": ["text", "block", "circle"] // first value is the default
  }
}
</contract>

<template>
  <div class="root" role="presentation"></div>
</template>

<style>
.root {
  background: $color.surface.hover;
  animation: pulse 1.4s ease-in-out infinite;

  &[data-shape='text'] {
    height: $space.4;
    width: 100%;
    border-radius: $radius.sm;
  }

  &[data-shape='block'] {
    height: $space.16;
    width: 100%;
    border-radius: $radius.md;
  }

  &[data-shape='circle'] {
    width: $space.10;
    height: $space.10;
    border-radius: $radius.full;
  }
}

@keyframes pulse {
  50% {
    opacity: $opacity.disabled;
  }
}

@media (prefers-reduced-motion: reduce) {
  .root {
    animation: none;
  }
}
</style>

Check your design tokens
Your design system needs these. tessera add reports the ones that are missing; by hand, run npx @pixelscriptio/tessera check.
color.surface.hover opacity.disabled radius.full radius.md radius.sm space.10 space.16 space.4

Usage

Using Skeleton

A placeholder in the shape of content that has not loaded yet.

shape is text (a line), block (a picture or a card) or circle (an avatar).
It is hidden from assistive technology and says nothing. Announce the loading some other way: a Spinner, or text in a live region.
It pulses, and stands still for people who prefer less motion.
Match the real content's size, so the page does not jump when it arrives.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Skeleton-0.tess

<template>
  <div>
    <Skeleton shape="circle" />
    <Skeleton />
    <Skeleton />
    <Skeleton shape="block" />
  </div>
</template>

API reference

Variants

Variant	Values
`shape`	`text` default `block` `circle`

Anatomy


Role	`generic`
Parts	`root`
Since	0.8.0

Design tokens it uses

Your design system needs these. tessera add checks that it has them, and can add the ones it lacks.

color.surface.hover opacity.disabled radius.full radius.md radius.sm space.10 space.16 space.4

Checksum

3a1560352526c7eb7e9969fd1cf06e02320d034efa4a130b55c63c0c7ea8692d