Color Schemes for Skeleton
are not implemented in the default theme. You can extend the theme to implement them.
Skeleton
Skeleton
is used to display the loading state of some components.
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
colorScheme
(string & {})
endColor
endColor
The color at the animation end
string
fadeDuration
fadeDuration
The fadeIn duration in seconds
number
0.4
isLoaded
isLoaded
If true
, it'll render its children with a nice fade transition
boolean
size
size
Sizes for Skeleton
are not implemented in the default theme. You can extend the theme to implement them.
string
speed
speed
The animation speed in seconds
number
0.8
startColor
startColor
The color at the animation start
string
variant
variant
Variants for Skeleton
are not implemented in the default theme. You can extend the theme to implement them.
string