Skeleton

<oblyx-skeleton> is a pulsing placeholder block that mimics the shape of content still loading: a line of text, an avatar, a card, anything a real layout needs a stand-in for before its data arrives.

Basic skeleton

HTML

Kotlin

<oblyx-skeleton style="width: 240px; height: 16px;"></oblyx-skeleton>

oblyxSkeleton {
  style = "width: 240px; height: 16px;"
}

No size attributes

There is no width or height attribute. Sizing a skeleton is not a design-system decision the way color or radius is, plain CSS already solves it with zero extra API surface, so every example on this page sets a style attribute directly, exactly how you'd size a plain placeholder <div> today. Give it the dimensions of the real content it stands in for.

Radius

md is the default. Use full for a circular avatar placeholder.

Skeleton radius

HTML

Kotlin

<oblyx-skeleton radius="none" style="width: 64px; height: 64px;"></oblyx-skeleton>
<oblyx-skeleton radius="sm" style="width: 64px; height: 64px;"></oblyx-skeleton>
<oblyx-skeleton radius="md" style="width: 64px; height: 64px;"></oblyx-skeleton>
<oblyx-skeleton radius="lg" style="width: 64px; height: 64px;"></oblyx-skeleton>
<oblyx-skeleton radius="full" style="width: 64px; height: 64px;"></oblyx-skeleton>

oblyxSkeleton(radius = OblyxSkeletonRadius.NONE) { style = "width: 64px; height: 64px;" }
oblyxSkeleton(radius = OblyxSkeletonRadius.SM) { style = "width: 64px; height: 64px;" }
oblyxSkeleton(radius = OblyxSkeletonRadius.MD) { style = "width: 64px; height: 64px;" }
oblyxSkeleton(radius = OblyxSkeletonRadius.LG) { style = "width: 64px; height: 64px;" }
oblyxSkeleton(radius = OblyxSkeletonRadius.FULL) { style = "width: 64px; height: 64px;" }

A composed placeholder

A skeleton has no notion of a "group" or a "card" shape of its own: compose one from plain <oblyx-skeleton> blocks arranged with ordinary layout, the same way you'd lay out the real content once it arrives.

Avatar and two text lines

HTML

Kotlin

<div style="display: flex; gap: var(--ox-spacing-3); align-items: center;">
  <oblyx-skeleton radius="full" style="width: 48px; height: 48px; flex-shrink: 0;"></oblyx-skeleton>
  <div style="display: flex; flex-direction: column; gap: var(--ox-spacing-2);">
    <oblyx-skeleton style="width: 160px; height: 14px;"></oblyx-skeleton>
    <oblyx-skeleton style="width: 220px; height: 14px;"></oblyx-skeleton>
  </div>
</div>

div {
  style = "display: flex; gap: var(--ox-spacing-3); align-items: center;"
  oblyxSkeleton(radius = OblyxSkeletonRadius.FULL) {
    style = "width: 48px; height: 48px; flex-shrink: 0;"
  }
  div {
    style = "display: flex; flex-direction: column; gap: var(--ox-spacing-2);"
    oblyxSkeleton { style = "width: 160px; height: 14px;" }
    oblyxSkeleton { style = "width: 220px; height: 14px;" }
  }
}

Staggering a group

stagger is not a visual property by itself: it's a zero-based position used purely to compute an animation delay, so a group of skeletons pulses in a wave rather than in unison. Give each sibling in a group an increasing value, starting from the one that should start first.

Staggered group

HTML

Kotlin

<div style="display: flex; flex-direction: column; gap: var(--ox-spacing-2); width: 260px;">
  <oblyx-skeleton stagger="0" style="width: 100%; height: 14px;"></oblyx-skeleton>
  <oblyx-skeleton stagger="1" style="width: 100%; height: 14px;"></oblyx-skeleton>
  <oblyx-skeleton stagger="2" style="width: 100%; height: 14px;"></oblyx-skeleton>
</div>

div {
  style = "display: flex; flex-direction: column; gap: var(--ox-spacing-2); width: 260px;"
  oblyxSkeleton(stagger = 0) { style = "width: 100%; height: 14px;" }
  oblyxSkeleton(stagger = 1) { style = "width: 100%; height: 14px;" }
  oblyxSkeleton(stagger = 2) { style = "width: 100%; height: 14px;" }
}

Accessibility

A skeleton always renders aria-hidden="true": a purely decorative placeholder should not be announced as empty content. The region that swaps a skeleton for real content is responsible for its own aria-busy, the skeleton itself carries none.

Reference

`<oblyx-skeleton>`

Attribute	Type	Default	Description
`radius`	`nonesmmdlgfull`	`md`	Corner rounding.
`stagger`	`number`	`0`	Stagger position among sibling skeletons, used purely to compute an animation delay so a group of skeletons pulses in a wave rather than in unison. Zero-based; the element with the lowest value starts first.