Skeleton

Skeleton is used to display the loading state of some components.

chakra ui pro

Import#

import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react"

Usage#

You can use it as a standalone component.

<Stack>
<Skeleton height="20px" />
<Skeleton height="20px" />
<Skeleton height="20px" />
</Stack>

Or to wrap another component to take the same height and width.

<Skeleton>
<div>contents wrapped</div>
<div>won't be visible</div>
</Skeleton>

Useful when fetching remote data.

import { Box } from "@chakra-ui/react"
function Card() {
const { data, loading, error } = useRemoteData()
if (error) return <Box children="error" />
return (
<Box>
<Skeleton isLoaded={!loading}>
<Heading>{data.title}</Heading>
</Skeleton>
</Box>
)
}

Circle and Text Skeleton#

<Box padding="6" boxShadow="lg" bg="white">
<SkeletonCircle size="10" />
<SkeletonText mt="4" noOfLines={4} spacing="4" />
</Box>

Skeleton color#

You can change the animation color with startColor and endColor.

<Skeleton startColor="pink.500" endColor="orange.500" height="20px" />

Skipping the skeleton when content is loaded#

You can prevent the skeleton from rendering using the isLoaded prop.

<Skeleton isLoaded>
<span>Chakra ui is cool</span>
</Skeleton>

Props#

colorScheme

Description

Color Schemes for Skeleton are not implemented in the default theme. You can extend the theme to implement them.

Type
string

endColor

Description

The color at the animation end

Type
string

fadeDuration

Description

The fadeIn duration in seconds

Type
number
Default
0.4

isLoaded

Description

If true, it'll render its children with a nice fade transition

Type
boolean

size

Type
string

speed

Description

The animation speed in seconds

Type
number
Default
0.8

startColor

Description

The color at the animation start

Type
string

variant

Type
string
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel