VOCABULARY / ENTRY

Skeleton Screen

skeleton

Add to comparison +

Microinteractions & feedbackScope: State / detailskeleton · v0.1.0

Show placeholder shapes resembling the expected content structure while that content is loading.

Interactive specimen · Fictional product FIELDNOTES

Load notes

Ready to load content.

Start loading, then simulate success or failure. You control the wait.

Recognizing it

Resembles the final content structure
Placeholders rather than fabricated data
Replaced when loading finishes

Concept boundary

Placeholder shapes do not indicate a completion percentage or disguise unfetched data as real content.

When to consider it

The content structure is known but completion progress is unavailable
Space should be reserved for incoming content

When to be cautious

The final content structure is entirely unknown
Loading placeholders continue indefinitely after a failure

Tradeoff

The structure can be previewed, but timeout, error, and retry paths are still needed.

Conditional rules · Editorial advice

When Reduced motion is enabledMustUse static placeholders and keep a text loading status available.

When Loading failsMustEnd the loading state and provide a reason and a retry action.

Query requirement:known_structure = true
The expected content structure must be known for a meaningful placeholder.

Related entries

Determinate Progress Bar ↗Conditional alternative · Choosing waiting feedback

Consider whether real completed work and the expected content structure are known.

Calm Technology ↗Works with · Using static placeholders

The status remains visible without continually competing for attention.

Sources and what they support

Carbon · Loading patterns ↗

Skeletons are simplified component shapes used for content that has not finished its initial load.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "states": [
    "idle",
    "loading",
    "success",
    "error"
  ],
  "a11y": [
    "Decorative placeholders are hidden from screen readers",
    "The container exposes a busy state and a text message"
  ],
  "motion": "Static placeholders by default"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.