Skeleton

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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>

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

Editable Example

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

contents wrapped

won't be visible

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

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

Editable Example

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>

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

Editable Example

Skeleton color#

You can change the animation color with startColor and endColor.

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

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

Editable Example

Skipping the skeleton when content is loaded#

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

Chakra ui is cool

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

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

Editable Example

Props#

`colorScheme`

Description

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

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`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`

Description

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

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`

Description

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

Type

string

Edit this page