Skeleton

Skeleton is a component that acts as a placeholder until content is loaded.

Import

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

Copied!

Usage

Editable example

<VStack>
  <Skeleton />

  <SkeletonCircle />

  <SkeletonText />
</VStack>

Copied!

Change Colors

You can set the start and end colors of the animation with startColor and endColor.

Editable example

<VStack>
  <Skeleton startColor="pink.500" endColor="orange.500" />

  <SkeletonCircle startColor="pink.500" endColor="orange.500" />

  <SkeletonText startColor="pink.500" endColor="orange.500" />
</VStack>

Copied!

Change Size

To change the width and height of an element, set boxSize or textHeight as a string or number.

Editable example

<VStack>
  <Skeleton h={16} />

  <SkeletonCircle boxSize={16} />

  <SkeletonText textHeight={4} />
</VStack>

Copied!

Additionally, by passing child elements, you can match the width and height.

Editable example

<Skeleton>
  <Text>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>
  <Text>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>
</Skeleton>

Copied!

Specify Number of Lines

By setting a number to lineClamp, you can change the number of lines. The default is set to 3.

Editable example

<SkeletonText lineClamp={5} />

Copied!

Change Duration

You can change the duration of the animation by setting speed as a string or number (seconds). The default is set to 0.8.

Editable example

<VStack>
  <Skeleton speed={2} />

  <SkeletonCircle speed={2} />

  <SkeletonText speed={2} />
</VStack>

Copied!

Display Content

By setting loaded to true, the placeholder will fade out and display the content.

Editable example

const [loaded, { toggle }] = useBoolean()

return (
  <VStack>
    <Button alignSelf="flex-start" onClick={toggle}>
      Toggle
    </Button>

    <SkeletonCircle loaded={loaded}>
      <Avatar name="Hirotomo Yamada" />
    </SkeletonCircle>

    <Skeleton loaded={loaded}>
      <Heading isTruncated>ギャルのパンティーおくれーーーっ！！！！！</Heading>
    </Skeleton>

    <SkeletonText loaded={loaded} lineClamp={1} textHeight={6}>
      <Text isTruncated>
        私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Text>
    </SkeletonText>
  </VStack>
)

Copied!

Change Fade Out Duration

To change the duration of the placeholder fade out, set fadeDuration as a number (seconds). By default, 0.4 is set.

Editable example

const [loaded, { toggle }] = useBoolean()

return (
  <VStack>
    <Button alignSelf="flex-start" onClick={toggle}>
      Toggle
    </Button>

    <SkeletonCircle loaded={loaded} fadeDuration={2}>
      <Avatar name="Hirotomo Yamada" />
    </SkeletonCircle>

    <Skeleton loaded={loaded} fadeDuration={4}>
      <Heading isTruncated>ギャルのパンティーおくれーーーっ！！！！！</Heading>
    </Skeleton>

    <SkeletonText loaded={loaded} fadeDuration={6} lineClamp={1} textHeight={6}>
      <Text isTruncated>
        私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Text>
    </SkeletonText>
  </VStack>
)

Copied!

Edit this page on GitHub

PreviousLoading NextProgress