Arctic Design
Get StartedFoundationsComponentsExamples
K

Skeleton

Displays a placeholder loading state to simulate the layout of content while it is being loaded.

Usage
import { Box, Skeleton } from '@arctic-kit/snow';
function Demo() {
return (
<Box
sx={{
width: 600,
display: 'flex',
flexDirection: 'column',
gap: 6,
}}
>
<Skeleton height={50} circle />
<Box height={100}>
<Skeleton height={'100%'} />
</Box>
<Skeleton height={8} />
<Skeleton height={8} />
<Skeleton height={8} width='70%' />
<Skeleton height={8} width='50%' />
<Skeleton height={8} width='25%' />
</Box>
);
}

API Reference

PropsTypeDefault
animateboolean | undefinedtrue
circleboolean | undefinedfalse
heightHeight<string | number> | undefined---
widthWidth<string | number> | undefined100%