Skip to content 
Skeleton
The skeleton component is used to indicate that a component is loading. It is a visual representation of the component's structure, without the actual content.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-skeleton--width | distance | Width of the skeleton |
--z-skeleton--height | distance | Height of the skeleton |
--z-skeleton--radius | distance | Radius of the skeleton |
--z-skeleton--time | distance | Duration of the animation |
--z-skeleton--bg-1 | color | Background color 1 |
--z-skeleton--bg-2 | color | Background color 2 |
Both hight and width can be customized using the --z-skeleton--height and --z-skeleton--width CSS custom properties respectively.
Also, the radius of the skeleton can be customized using the --z-skeleton--radius CSS custom property. The time of the animation can be customized using the --z-skeleton--time CSS custom property.
And finally, you can customize both background colors using the --z-skeleton--bg-1 and --z-skeleton--bg-2 CSS custom properties.