Components

Skeleton

A placeholder shape that stands in while content loads.

Usage

Basic

HTML

<bs:bsui-stack direction="column" gap="2" align="center">
  <bs:bsui-skeleton width="260px" height="16px" rounded="true" />
  <bs:bsui-skeleton width="200px" height="16px" rounded="true" />
  <bs:bsui-skeleton width="140px" height="16px" rounded="true" />
</bs:bsui-stack>

Comment placeholder

A circle beside two lines reserves the shape of an avatar and its text.

HTML

<bs:bsui-stack direction="row" gap="3" align="center">
  <bs:bsui-skeleton width="2.5rem" height="2.5rem" rounded="true" />
  <bs:bsui-stack direction="column" gap="2">
    <bs:bsui-skeleton width="12rem" height="0.875rem" />
    <bs:bsui-skeleton width="8rem" height="0.875rem" />
  </bs:bsui-stack>
</bs:bsui-stack>

Card placeholder

Widths in percent let the placeholder track the column it loads into.

HTML

<bs:bsui-stack direction="column" gap="3">
  <bs:bsui-skeleton width="100%" height="8rem" />
  <bs:bsui-skeleton width="60%" height="1.25rem" />
  <bs:bsui-skeleton width="100%" height="0.875rem" />
  <bs:bsui-skeleton width="80%" height="0.875rem" />
</bs:bsui-stack>

Attributes

Attribute	Type	Default
`width`	`text`	—
`height`	`text`	`1rem`
`rounded`	`toggle`	`false`