Skeleton
Placeholder block standing in for content that has not arrived, in three shapes and three animations.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
variant | SkeletonVariant | rect | Shape of the placeholder. |
animation | SkeletonAnimation | pulse | How the block animates while it waits. |
lines | number | 1 | Number of lines drawn by the `text` variant; the last one is shortened. Ignored by the other variants. |
label | string | — | Announce the wait on this skeleton. Leave empty on the rest of a group so the message is not repeated. |
CSS custom properties
Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.
| Name | Type | Default | Description |
|---|---|---|---|
--c2-skeleton--width | pixel | 100% | Width of the block. Ignored by `circle`, which sizes itself. |
--c2-skeleton--height | pixel | 16px | Height of the block, or of one line of a `text` skeleton. |
--c2-skeleton--border-radius | border-radius | 4px | Rounding; `circle` overrides it with a full round. |
--c2-skeleton--background-color | color | #e4e4e7 | Colour of the block. |
--c2-skeleton--animation-duration | time | 1.6s | Length of one pulse or wave cycle. |
--c2-skeleton--gap | pixel | 8px | Space between the lines of a `text` skeleton. |
--c2-skeleton__sheen--color | color | rgba(255, 255, 255, 0.55) | Highlight swept across a `wave` skeleton. |
--c2-skeleton__pulse--opacity | opacity | 0.45 | Faintest point of the `pulse` animation. |
--c2-skeleton__last-line--width | pixel | 60% | Width of the final line when `lines` is more than one. |
--c2-skeleton__circle--size | pixel | 40px | Diameter of a `circle` skeleton; it sets both axes so it cannot go oval. |