role presentation
Skeleton draft v0.1.0
A placeholder shape that stands in for content while it loads.
A skeleton draws the outline of content that is not there yet: a line of text, an avatar, a card. Several skeletons laid out like the content they stand for tell people what is coming and where, with less jump than a spinner followed by the real content. A skeleton is invisible to assistive technology; the region that loads says so itself.
Tokens
From packages/tokens/src/components/skeleton.tokens.json. Path grammar: skeleton.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (10)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
skeleton.container.background
|
color |
{global.bg.state.skeleton.default}
|
light
#DFDBDC66
dark
#303030b2
|
--skeleton-container-background
|
skeleton.container.border-radius.text
|
dimension |
{corner-radius.2xs}
|
2px
|
--skeleton-container-border-radius-text
|
skeleton.container.border-radius.rectangle
|
dimension |
{corner-radius.sm}
|
8px
|
--skeleton-container-border-radius-rectangle
|
skeleton.container.border-radius.circle
|
dimension |
{corner-radius.full}
|
9999px
|
--skeleton-container-border-radius-circle
|
skeleton.container.height.text
|
dimension |
{space.16}
|
16px
|
--skeleton-container-height-text
|
skeleton.container.height.circle
|
dimension |
{space.40}
|
40px
|
--skeleton-container-height-circle
|
skeleton.container.height.rectangle
|
dimension |
{space.96}
|
96px
|
--skeleton-container-height-rectangle
|
skeleton.container.opacity
Low point of the pulse; the high point is fully opaque.
|
number |
{opacity.50}
|
0.5
|
--skeleton-container-opacity
|
skeleton.container.animation.duration
|
duration |
{duration.normal}
|
250ms
|
--skeleton-container-animation-duration
|
skeleton.container.animation.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--skeleton-container-animation-easing
|