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 isLoaded to true, the placeholder will fade out and display the content.

Editable example

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

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

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

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

    <SkeletonText isLoaded={isLoaded} 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 [isLoaded, { toggle }] = useBoolean()

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

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

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

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

Copied!

Edit this page on GitHub

PreviousLoading NextProgress