Skeleton

Overview

Preserve layout while content loads. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Skeleton when you need to preserve layout while content loads. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<div style="width:min(100%,480px)" aria-label="Loading device health"><div class="he-skeleton" style="width:45%"></div><div class="he-skeleton" style="width:100%;margin-top:12px"></div><div class="he-skeleton" style="width:76%;margin-top:12px"></div></div>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Hide decorative shapes and expose one container-level loading status.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components