Skeleton

Component preview

Decorative placeholder shapes that reserve the approximate layout of content while that content is loading.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: skeleton screen, content placeholder, loading placeholder

gray shapes where cards will appear
preview the page layout while it loads
placeholder lines before text arrives
reserve image and title space during loading
a loading state shaped like the final content
avoid the page jumping when data appears

Try it

Wait and track progress

Compare all three behaviors

Shared comparison scenario: A workspace waits for content or an operation to finish and communicates only the progress it can measure honestly.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Skeleton

Skeleton previews content shape; Spinner communicates unknown work compactly, while Progress bar reports measurable completion.

Your task

Compare all three placeholder geometries with the loaded profiles, simulate one failed card, and retry it.

Edge case to verify

A failed card becomes a real textual error with Retry rather than remaining an endless skeleton.

Mission

Skeleton

Compare all three placeholder geometries with the loaded profiles, simulate one failed card, and retry it.

Primary state: Three decorative placeholders reserve the exact profile-card grid while the directory exposes its busy state.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Surface

The visible container that holds the concept's content.

Use it when

Loading a card or article layout whose shape is known
Preventing layout shift while a collection fetches

Avoid it when

The wait concerns one compact button action
The final layout is unknown or highly variable

Compare similar concepts

Spinner communicates an indeterminate wait; Progress bar shows measurable completion, while Skeleton previews the shape of content still loading.

Spinner

Progress bar requires a meaningful measurable value; Spinner is for unknown completion, while Skeleton represents the eventual content layout.

Progress bar

Technical details

Behaviors

Reserve the final layout
Placeholder shapes reserve stable space and are replaced by real content without a layout jump.
Mark the region busy
The content region exposes its busy state while a separate visual indicator remains redundant.

States

Placeholders visible
Placeholders visible
Content visible
Content visible
Failed card error visible
Failed card error visible

State transitions

Placeholders visible → Content visible
The requested content resolves and atomically replaces matching placeholder geometry.
Content visible → Failed card error visible
Simulate failed card keeps two profiles visible and replaces the third with a textual error and Retry.
Placeholders visible → Failed card error visible
Simulate failed card replaces the loading example with two profiles and one recoverable card error.
Failed card error visible → Placeholders visible
Retry card restores the three matching placeholders while the replacement content loads again.
Failed card error visible → Content visible
Show content replaces the recoverable card error with all three loaded profiles.

Test scenarios

Context: A people directory loads three profile cards with an avatar, name, and short status.
Mission: Compare all three placeholder geometries with the loaded profiles, simulate one failed card, and retry it.
Primary state: Three decorative placeholders reserve the exact profile-card grid while the directory exposes its busy state.
Edge case: A failed card becomes a real textual error with Retry rather than remaining an endless skeleton.

Accessibility

Role: aria-hidden placeholders with aria-busy on the content region
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Focus remains on the existing page; replacing placeholders does not reorder or steal focus.
Dismissal: Skeletons disappear only when replaced by content, an empty state, or an actionable error state.
Scroll: Loading and replacement content reserve enough space to prevent layout jumps and preserve the user's scroll position.
Announcement: The region announces a concise loading state and final result; individual decorative shapes are never announced.
Keyboard: Placeholders never enter the tab order
Retry controls appear only in real error states

Bindings

decorative blocks
implementationKind
custom
nativeElement
decorative blocks
ariaPattern
aria-busy on the content region
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Skeleton shapes remain aria-hidden and approximate the final layout; they do not replace a textual loading status where one is needed.
Verify binding source

Sources

WAI-ARIA 1.2: aria-busy
W3C WAI · standard · 2026-07-16
Claim covered: Skeleton: normative aria-busy state used to expose an updating region without announcing incomplete content.
WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Claim covered: Skeleton: WCAG status-message requirements used to qualify non-focus-moving announcements.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.