beta

Skeleton A faux UI to indicate the loading state of a component or UI Block.

CSS Source

Controls

Width Size in rems. 1rem = 16px. We use rems so that if we change the base font size other elements size appropriately. Set to 0 for 100% width.

Height Size in rems. 1rem = 16px. We use rems so that if we change the base font size other elements size appropriately. Set to 0 for a default height of 1rem.

Corner radius Size in pixels. Border radius has some oddities so the only uniform way to control it is with pixels. :(

Background color Any color you choose here will be set to 90% opacity. The default value is the nearest parent color style (currentColor).

Foreground Gradient fade base color. Any color you choose here will be set to 30% opacity. The default value is Prose white.

Real example A real-world example. Ignores the previous controls.

Properties Jump to heading

Class / Token	Type
`.prs-skeleton`	Component	For container
`--skel-width`	Token	Width
`--skel-height`	Token	Height
`--skel-radius`	Token	Corner/border radius
`--skel-bg`	Token	Background color (converted to 90% transparent)
`--skel-fg`	Token	Gradient base color (converted to 30% transparent)