Skeleton
Skeleton component display a placeholder preview before the data gets loaded.
To implement Separator component into your project you’ll need to add the import:
import Skeleton from "@kiwicom/orbit-components/lib/Skeleton";
After adding import into your project you can use it simply like:
<Skeleton height={100} width={300} />
or
<Skeleton><rect x="48" y="8" rx="3" ry="3" width="88" height="6" /><rect x="48" y="26" rx="3" ry="3" width="52" height="6" /><rect x="0" y="56" rx="3" ry="3" width="410" height="6" /></Skeleton>
or if you need to render only rect, you can use the row
property like:
<Skeleton rows={3} rowOffset={15} rowHeight={10} />
or you can pick one from our predefined presets:
<Skeleton preset="Button" />
Props
Name | Type | Default | Description |
---|---|---|---|
animate | boolean | true | Turn off/on animation |
children | React.ReactNode | ||
height | number \| string | 100% | Set height for Svg element |
height | number \| string | 100% | Set height for Svg element |
maxHeight | number \| string | Set maxHeight for Svg element | |
rowBorderRadius | number | 3 | Border-radius for row rect elements |
rowHeight | number | 21px | Set height for rect elements |
rowOffset | number | 20px | Set offset between rect elements |
rows | number | Number of rect elements | |
title | string | loading | Add text for svg accessible name element |
preset | Preset | You can pick one of predefined presets | |
viewBox | string | Set viewBox for Svg element | |
width | number \| string | 100% | Width of Svg element |
spaceAfter | enum | Additional margin-bottom after component. | |
dataTest | string | Optional prop for testing purposes | |
id | string | Set id for Skeleton | |
color | string | paletteCloudDark | Set color for svg rect element from orbit tokens |
enum
spaceAfter |
---|
"none" |
"smallest" |
"small" |
"normal" |
"medium" |
"large" |
"largest" |
Preset
Preset |
---|
"List" |
"Image" |
"Card" |
"Button" |
"Text" |