Skeleton

Preview Code

375 768 Full

Open

html

<div style="display: grid; grid-template-columns: auto 1fr; gap: var(--aparte-space-3); align-items: start" aria-busy="true">
  <span class="aparte-skeleton aparte-skeleton--circle" aria-hidden="true"></span>
  <div>
    <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
    <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
    <span class="aparte-skeleton aparte-skeleton--text" style="max-inline-size: 60%" aria-hidden="true"></span>
  </div>
  <span class="aparte-skeleton aparte-skeleton--rect" style="grid-column: 2" aria-hidden="true"></span>
</div>

.aparte-skeleton is a block that pulses where text, a picture or a card will be. It has no margin of its own: lay a group out the way the real content will be (a grid with a gap), and the skeleton takes the same shape. The conversation list and the transcript draw their loading state with it.

Customize

Variable	Default
--aparte-skeleton-rect-height	5rem
--aparte-skeleton-text-last-width	60%
--aparte-skeleton-base	var(--aparte-track)
--aparte-skeleton-shine	var(--aparte-surface-3)
--aparte-skeleton-text-height	var(--aparte-content-font-size)
--aparte-skeleton-text-gap	calc(var(--aparte-content-font-size) * (var(--aparte-content-line-height) - 1))
--aparte-skeleton-circle-size	var(--aparte-avatar-size)

Classes

.aparte-skeleton · .aparte-skeleton--circle · .aparte-skeleton--rect · .aparte-skeleton--text

Accessibility

• A skeleton is decoration: give it aria-hidden="true", or put the group in one region marked aria-busy with a line that says what is loading, so a screen reader does not read empty boxes.
• The pulse stops under prefers-reduced-motion.

Related

• Spinner — a wait with no shape to stand in for.
• Conversation — the transcript’s loading state.