Skeleton

Skeleton Button

A skeleton button
<SkeletonButton size={10} />

Skeleton Card Index

A complete skeleton layout with card grid
<Page width={1180}> <Styled(PrimitiveBox)> <Styled(PrimitiveBox) width={1080}> <SkeletonText width="8%" /> <SkeletonButton square={true} /> </Styled(PrimitiveBox)> <SkeletonPageHeaderToolbar width={1080}> <SkeletonText width="4%" /> <SkeletonText width="4%" /> <SkeletonText width="4%" /> </SkeletonPageHeaderToolbar> </Styled(PrimitiveBox)> <SkeletonPage width={1080}> <SkeletonGrid> <SkeletonCard /> <SkeletonCard /> <SkeletonCard /> </SkeletonGrid> </SkeletonPage> </Page>

Skeleton List Index

A complete skeleton layout with item list
<Page width={1180}> <Styled(PrimitiveBox)> <Styled(PrimitiveBox) width={1080}> <SkeletonText width="10%" /> <SkeletonAvatar size={2} /> </Styled(PrimitiveBox)> <SkeletonPageHeaderToolbar width={1080}> <SkeletonText width="4%" /> <SkeletonText width="4%" /> <SkeletonText width="4%" /> </SkeletonPageHeaderToolbar> </Styled(PrimitiveBox)> <SkeletonPage width={1080}> <SkeletonList> <SkeletonListItem /> <SkeletonListItem /> <SkeletonListItem /> </SkeletonList> </SkeletonPage> </Page>

Skeleton header tabs

A skeleton header with tabs rather than seperated toolbar
<Page width={1180}> <Styled(PrimitiveBox)> <Styled(PrimitiveBox) width={1080}> <SkeletonText heading={true} width="20%" /> <SkeletonButton square={true} /> </Styled(PrimitiveBox)> <SkeletonPageHeaderTabs width={1080}> <SkeletonText width="8%" /> <SkeletonText width="8%" /> <SkeletonText width="8%" /> </SkeletonPageHeaderTabs> </Styled(PrimitiveBox)> <SkeletonPage width={1080} /> </Page>

Overridden card content

Override the vertical content of cards by passing children
<Page padding={30} width={380} > <SkeletonCard> <SkeletonText width="30%" /> <SkeletonText /> <SkeletonText width="20%" /> <SkeletonText /> <SkeletonText width="40%" /> <SkeletonButton size={18} /> </SkeletonCard> </Page>

Overridden list item content

Override the horizontal content of list item by passing children
<Page padding={30}> <SkeletonListItem> <SkeletonText width="20%" /> <SkeletonText width="10%" /> <SkeletonText width="40%" /> <SkeletonText width="10%" /> <SkeletonButton size={18} /> </SkeletonListItem> </Page>

Custom layouts

Use lists and grids to represent structured pages
<Page padding={30}> <SkeletonGrid center={false}> <SkeletonList center={false}> <SkeletonPaper> <SkeletonList center={false}> <SkeletonText heading={true} width="50%" /> <SkeletonText width="15%" /> <SkeletonText width="80%" /> <SkeletonText width="70%" /> <SkeletonText width="80%" /> <SkeletonText width="20%" /> </SkeletonList> </SkeletonPaper> </SkeletonList> <SkeletonList> <SkeletonPaper> <SkeletonList center={false}> <SkeletonText heading={true} /> <SkeletonText width="10%" /> </SkeletonList> </SkeletonPaper> </SkeletonList> </SkeletonGrid> </Page>