skeleton / placeholder

Fragment reference skeleton / placeholder

tags

ui

skeleton renders a visual standin for content that is loading or not yet designed. placeholder is an alias — both render as wa-skeleton.

Use placeholder in wireframes for deferred visual areas. Use skeleton when explicitly modelling a loading state.

Attributes

Attribute	Type	Default	Description
effect	none | pulse | sheen	none	Animation effect. sheen is a left-to-right sweep; pulse fades in and out.
style	string	—	Inline CSS for sizing and border-radius.

Sizing: wa-skeleton is a block element that stretches to fill its container by default. Control dimensions with the style attribute.

Shape: Use style="border-radius: 50%" for circular variants. Use style="border-radius: var(--wa-border-radius-m)" for rounded.

Color: Override fill and sweep color via --color and --sheen-color CSS custom properties.

Common patterns

Text block

stack(gap="xs")
  skeleton(effect="sheen")
  skeleton(effect="sheen")
  skeleton(effect="sheen" style="width: 65%")

Avatar (circle)

skeleton(style="width: 48px; height: 48px; border-radius: 50%")

Avatar + text row

row(align="center" gap="md")
  skeleton(style="width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0")
  stack(gap="xs" style="flex: 1")
    skeleton(effect="sheen")
    skeleton(effect="sheen" style="width: 50%")

Image / media box

skeleton(effect="sheen" style="height: 180px")

Card skeleton

card
  stack(gap="sm")
    skeleton(effect="sheen" style="height: 120px")
    skeleton(effect="sheen")
    skeleton(effect="sheen" style="width: 70%")
    row(gap="sm")
      skeleton(effect="sheen" style="width: 80px; height: 32px")
      skeleton(effect="sheen" style="width: 80px; height: 32px")

Table rows

stack(gap="xs")
  skeleton(style="height: 36px")
  skeleton(effect="pulse")
  skeleton(effect="pulse")
  skeleton(effect="pulse")