i

Skeleton

Showing state and identity · researched

Placeholder shapes shown in place of content while it loads.

atom

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Skeleton native: no antd 6.6.5
Variants
—
Sizes
large, medium, small
States documented
loading
Accessibility guidance
no

Div/span placeholders with Skeleton.Avatar, Button, Image, Input, Node sub-shapes plus title/paragraph blocks.

docs ↗ · code ↗

Carbon

Skeleton text, icon, placeholder contested native: no @carbon/react 1.117.0
Variants
text, icon, placeholder
Sizes
—
States documented
loading
Accessibility guidance
yes

No component named Skeleton: Carbon ships SkeletonText, SkeletonIcon, SkeletonPlaceholder plus a Skeleton export per component (DataTableSkeleton, Tag.Skeleton, etc.), documented in the Loading pattern page. The index's 'Skeleton' entry is that family; the per-component skeletons are instances.

2 corrected on re-read
  • variants: null → ["text","icon","placeholder"] Exports SkeletonText, SkeletonIcon, SkeletonPlaceholder (source; docs name none)
  • urls: {"docs_url":"https://carbondesignsystem.com/patterns/loading-pattern/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/SkeletonText"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/patterns/loading","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/SkeletonText"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/patterns/loading; code URL 200

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No skeleton or placeholder-loading component.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. No placeholder-loading element; progress indicators only.

Primer

SkeletonBox, SkeletonText, SkeletonAvatar variant native: no @primer/react 38.40.1
Variants
square
Sizes
display, titleLarge, titleMedium, titleSmall, bodyLarge, bodyMedium, bodySmall, subtitle
States documented
—
Accessibility guidance
yes

Disagrees with index flag (said not shipped, listed only as instances). Primer React ships three skeleton placeholders: SkeletonBox (ready), SkeletonText (experimental), SkeletonAvatar (experimental), each a div; there is no single Skeleton wrapper. SkeletonText sizes shown; SkeletonAvatar size is a number.

1 corrected on re-read
  • variants: null → ["square"] SkeletonAvatar documents a Square variant; others none

docs ↗ · code ↗

Spectrum

Skeleton native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
—
States documented
loading
Accessibility guidance
no

Implementation: S2 only (Skeleton wraps content and renders it as inert placeholders; internally uses spans). No v3, SWC or CSS counterpart, no spectrum.adobe.com page. Not in installed SWC 1.12.4. S2 MDX has no accessibility section.

1 corrected on re-read
  • states_documented: null → ["loading"] Documented prop isLoading toggles the placeholder (loading) state

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no skeleton or loading-placeholder component.

Platform facts

Native elementnot recordedNo source defines a skeleton placeholder. Neither HTML nor APG has a loading placeholder element. Related ARIA state: aria-busy ('whether an element is currently being modified'; MDN notes it can signal loading in widgets or feeds) is a global attribute for the container being loaded, not a skeleton element.
Baseline—
APG patternnone
ARIA role—
Shipped by4 of 7 systems

Anatomy

    The seven states

    default Placeholder shapes.
    hover n/a — Not interactive.
    focus n/a — Not focusable.
    active n/a — Not interactive.
    disabled n/a — Not defined by APG or HTML.
    error n/a — Not defined by APG or HTML.
    loading MDN aria-busy: global state for an element that is currently being modified; APG Feed sets aria-busy=true while articles are added. Whether a skeleton uses it is an author choice; no source defines a skeleton.

    Every cell was read twice, the second time from raw sources by a separate pass. 4 of 35 fields changed on the second read — open any “corrected” note to see what it said before.