Skeleton

import { SkeletonDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Skeleton);

Usage

Use Skeleton to create a placeholder for loading content. Skeleton supports the following props:

• height – height – any valid CSS value
• width – width - any valid CSS value
• radius – key of theme.radius or any valid CSS value to set border-radius
• circle – if true, width, height and border-radius will equal the value specified in the height prop
• animate – true by default, controls animation

<Demo data={SkeletonDemos.configurator} />

With content

If you want to indicate the loading state of content that is already on the page, wrap it with Skeleton and control the loading overlay visibility with the visible prop:

<Demo data={SkeletonDemos.content} />