Skeleton

Skeletons are loading placeholders that mimic content layout. They use an animated shimmer to indicate progress and are composable for custom layouts.

Open Skeleton Playground

Open in Figma

Anatomy

1
  1. 1 Skeleton — animated fill that mimics a content region

Options

Shapes

Text
Heading
Circle
Rectangle

Text width

Full (default)
Medium (80%)
Short (60%)

Sizes

Small
Medium (default)
Large

Animation

Shimmer (default)
Static (no animation)

Composable layouts

Use the .uif-skeleton-group wrapper to compose custom skeleton layouts. The row modifier arranges children horizontally.

Card layout

Code

CSS pattern

<!-- Text line -->
<span class="uif-skeleton text" role="status" aria-label="Loading…" aria-busy="true"></span>

<!-- Heading -->
<span class="uif-skeleton heading" role="status" aria-label="Loading…" aria-busy="true"></span>

<!-- Circle -->
<span class="uif-skeleton circle" role="status" aria-label="Loading…" aria-busy="true"></span>

<!-- Rectangle -->
<span class="uif-skeleton rect" role="status" aria-label="Loading…" aria-busy="true"></span>

<!-- No animation -->
<span class="uif-skeleton text no-animation" role="status" aria-label="Loading…" aria-busy="true"></span>

<!-- Composable group -->
<div class="uif-skeleton-group">
  <div class="uif-skeleton-group row">
    <span class="uif-skeleton circle" role="status" aria-label="Loading…" aria-busy="true"></span>
    <div class="uif-skeleton-group" style="flex: 1;">
      <span class="uif-skeleton text medium" role="status" aria-label="Loading…" aria-busy="true"></span>
      <span class="uif-skeleton text short" role="status" aria-label="Loading…" aria-busy="true"></span>
    </div>
  </div>
</div>

Web Component

<uif-skeleton shape="text"></uif-skeleton>
<uif-skeleton shape="circle" size="lg"></uif-skeleton>
<uif-skeleton shape="rect" size="sm"></uif-skeleton>
<uif-skeleton shape="text" width="short" animated="false"></uif-skeleton>

Component tokens

Token Description
--uif-skeleton-background Base fill color
--uif-skeleton-background-highlight Shimmer highlight color
--uif-skeleton-border-radius Corner radius
--uif-skeleton-text-height Height of text line variants
--uif-skeleton-heading-height Height of heading variant
--uif-skeleton-circle-size Diameter for circle shape
--uif-skeleton-rect-height Height for rectangle shape
--uif-skeleton-animation-duration Shimmer animation duration
--uif-skeleton-group-gap Gap in .uif-skeleton-group

Accessibility

Each skeleton element should carry role="status", aria-label="Loading…", and aria-busy="true" so assistive technologies announce the loading state. Remove these attributes (or the entire skeleton markup) once content has loaded.