VOCABULARY / ENTRY
Skeleton Screen
skeleton
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-15Definitions 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"
}Full Agent entry JSON
{
"id": "skeleton",
"type": "micro",
"name": {
"zh": "骨架屏",
"en": "Skeleton Screen"
},
"aliases": [
"Skeleton Loading",
"加载占位",
"骨架加载"
],
"granularity": "state",
"intents": [
"wait-for-content"
],
"tags": [
"loading",
"unknown progress",
"placeholder",
"asynchronous",
"loading"
],
"definition": "Show placeholder shapes resembling the expected content structure while that content is loading.",
"boundary": "Placeholder shapes do not indicate a completion percentage or disguise unfetched data as real content.",
"signature": [
"Resembles the final content structure",
"Placeholders rather than fabricated data",
"Replaced when loading finishes"
],
"when": [
"The content structure is known but completion progress is unavailable",
"Space should be reserved for incoming content"
],
"when_not": [
"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.",
"comparison": {
"focus": "Showing that content is on its way",
"mechanism": "Structural placeholders",
"cost": "Does not communicate a completion percentage"
},
"sources": [
{
"id": "carbon-loading",
"title": "Carbon · Loading patterns",
"url": "https://carbondesignsystem.com/patterns/loading-pattern/",
"claim": "Skeletons are simplified component shapes used for content that has not finished its initial load.",
"checkedAt": "2026-09-15",
"archive": {
"lookupUrl": "https://web.archive.org/web/20260915*/https://carbondesignsystem.com/patterns/loading-pattern/",
"status": "available",
"checkedAt": "2026-09-15T16:50:44.269Z",
"jobId": "spn2-3b0dc711f48ca28755724206ac848b795d3b387d",
"url": "https://web.archive.org/web/20260915165155/https://carbondesignsystem.com/patterns/loading-pattern/",
"timestamp": "20260915165155"
}
}
],
"relations": [
{
"target": "determinate-progress",
"kind": "alternative",
"condition": "Choosing waiting feedback",
"reason": "Consider whether real completed work and the expected content structure are known.",
"basis": "editorial"
},
{
"target": "calm-technology",
"kind": "composes_with",
"condition": "Using static placeholders",
"reason": "The status remains visible without continually competing for attention.",
"basis": "editorial"
}
],
"rules": [
{
"when": "Reduced motion is enabled",
"instruction": "Use static placeholders and keep a text loading status available.",
"strength": "must",
"basis": "editorial"
},
{
"when": "Loading fails",
"instruction": "End the loading state and provide a reason and a retry action.",
"strength": "must",
"basis": "editorial"
}
],
"requirements": [
{
"fact": "known_structure",
"value": true,
"reason": "The expected content structure must be known for a meaningful placeholder."
}
],
"behavior": {
"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"
},
"demo": "skeleton",
"version": "0.1.0",
"editorialStatus": "sample-reviewed",
"demoCapabilities": [
"keyboard",
"reduced_motion"
],
"implementationNote": "Capability tags describe this specimen only; verify the implementation again in a real product.",
"searchTerms": [
"加载",
"未知进度",
"占位",
"异步",
"loading"
]
}