Skeleton

Loading placeholder with shimmer animation for content loading states.

Text Lines

Base

Class	Description
`.ui-skeleton`	Base class

Variant

Class	Value
`.ui-skeleton--text`	text
`.ui-skeleton--heading`	heading
`.ui-skeleton--circle`	circle
`.ui-skeleton--rect`	rect
`.ui-skeleton--static`	static

Pulse

Class	Description
`.ui-skeleton--pulse`	pulse

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-skeleton-bg`	`var(--ui-color-bg-inset)`	Background color
`--ui-skeleton-shimmer`	`var(--ui-skeleton-shimmer)`	Shimmer
`--ui-skeleton-radius`	`var(--ui-radius-sm)`	Corner radius

Shapes

<div class="ui-flex ui-gap-2 ui-items-start">
  <div class="ui-skeleton ui-skeleton--circle"></div>
  <div style="flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-1);">
    <div class="ui-skeleton ui-skeleton--heading"></div>
    <div class="ui-skeleton ui-skeleton--text"></div>
  </div>
</div>

Card Skeleton

<div class="ui-card" style="width: 304px;">
  <div class="ui-skeleton ui-skeleton--rect"></div>
  <div style="padding: var(--ui-space-2); display: flex; flex-direction: column; gap: var(--ui-space-1);">
    <div class="ui-skeleton ui-skeleton--heading"></div>
    <div class="ui-skeleton ui-skeleton--text"></div>
    <div class="ui-skeleton ui-skeleton--text" style="width: 70%;"></div>
  </div>
</div>

Pulse Animation

<div class="ui-skeleton ui-skeleton--text ui-skeleton--pulse"></div>

Static

<!-- No animation, just a placeholder block. -->
<div class="ui-skeleton ui-skeleton--static" style="width: 200px;"></div>