Skeleton

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

<VStack>
  <Skeleton />
  <SkeletonCircle />
  <SkeletonText />
</VStack>

Usage

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

import { Skeleton, SkeletonCircle, SkeletonText } from "@/components/ui"

import { Skeleton, SkeletonCircle, SkeletonText } from "@workspaces/ui"

<Skeleton />
<SkeletonCircle />
<SkeletonText />

Change Variant

<VStack>
  <HStack>
    <For each={["pulse", "shine"]}>
      {(variant) => (
        <VStack key={variant}>
          <SkeletonCircle variant={variant} />
          <SkeletonText variant={variant} lineClamp={2} />
          <Skeleton variant={variant} h="4xs" />
        </VStack>
      )}
    </For>
  </HStack>
</VStack>

Change Size

<VStack>
  <HStack>
    <SkeletonCircle boxSize="14" />
    <SkeletonText h="6" lineClamp={2} />
  </HStack>
  <Skeleton h="20" />
</VStack>

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

Badge

プ

<VStack lineHeight="1">
  <HStack>
    <Skeleton>
      <Badge>Badge</Badge>
    </Skeleton>

    <Skeleton loading={false}>
      <Badge>Badge</Badge>
    </Skeleton>
  </HStack>

  <HStack>
    <SkeletonCircle>
      <Avatar
        name="プリン"
        src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
      />
    </SkeletonCircle>

    <SkeletonCircle loading={false}>
      <Avatar
        name="プリン"
        src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
      />
    </SkeletonCircle>
  </HStack>
</VStack>

Change Blink Color

To change the blink color, use the startColor and endColor properties.

<VStack>
  <Skeleton variant="shine" startColor="pink.500" endColor="orange.500" />
  <SkeletonCircle variant="shine" startColor="pink.500" endColor="orange.500" />
  <SkeletonText variant="shine" startColor="pink.500" endColor="orange.500" />
</VStack>

Change Text Gap

To change the gap between text lines, set the gap property.

<SkeletonText gap="md" />

Specify Number of Lines

To specify the number of lines, set a numeric value to lineClamp.

<SkeletonText lineClamp={5} />

Change Blink Duration

To change the blink duration, set a numeric value (seconds) to duration.

<VStack>
  <Skeleton duration={2} />
  <SkeletonCircle duration={2} />
  <SkeletonText duration={2} />
</VStack>

Display Child Elements

To display child elements, pass false to loading.

上

const { loading } = useAsync(() => wait(3000))

return (
  <VStack>
    <HStack>
      <SkeletonCircle loading={loading}>
        <Avatar
          name="上から見たプリン"
          src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
          size="xl"
        />
      </SkeletonCircle>

      <SkeletonText lineClamp={2} loading={loading} _loading={{ h: "5" }}>
        <Text fontWeight="bold" lineClamp={1}>
          プリン
        </Text>
        <Text lineClamp={1}>
          つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
          歌う。
        </Text>
      </SkeletonText>
    </HStack>
  </VStack>
)

Change Fade In Duration

To change the fade in duration, set a numeric value (seconds) to fadeDuration.

上

const { loading } = useAsync(() => wait(3000))

return (
  <VStack>
    <HStack>
      <SkeletonCircle fadeDuration={2} loading={loading}>
        <Avatar
          name="上から見たプリン"
          src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
          size="xl"
        />
      </SkeletonCircle>

      <SkeletonText
        fadeDuration={2}
        lineClamp={2}
        loading={loading}
        _loading={{ h: "5" }}
      >
        <Text fontWeight="bold" lineClamp={1}>
          プリン
        </Text>
        <Text lineClamp={1}>
          つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
          歌う。
        </Text>
      </SkeletonText>
    </HStack>
  </VStack>
)

Props

Skeleton

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`variant`	`"pulse"`	`"none" \| "pulse" \| "shine"` The variant of the component.
`duration`	-	`number \| string` The animation duration in seconds.
`endColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color at the animation end.
`fadeDuration`	-	`number \| string` The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.
`fitContent`	`false`	`boolean` If `true`, the skeleton will take the width of it's children.
`loading`	`true`	`boolean` If `false`, it'll render its children with a nice fade transition.
`startColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color at the animation start.

SkeletonCircle

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`variant`	-	`"none" \| "pulse" \| "shine"` The variant of the component.
`duration`	-	`number \| string` The animation duration in seconds.
`endColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color at the animation end.
`fadeDuration`	-	`number \| string` The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.
`fitContent`	`false`	`boolean` If `true`, the skeleton will take the width of it's children.
`loading`	`true`	`boolean` If `false`, it'll render its children with a nice fade transition.
`startColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color at the animation start.

SkeletonText

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`variant`	-	`"none" \| "pulse" \| "shine"` The variant of the component.
`duration`	-	`string \| number` The animation duration in seconds.
`endColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color at the animation end.
`fadeDuration`	-	`string \| number` The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.
`fitContent`	`false`	`boolean` If `true`, the skeleton will take the width of it's children.
`lineClamp`	-	`number` The number of lines to display.
`loading`	`true`	`boolean` If `false`, it'll render its children with a nice fade transition.
`rootProps`	-	`HTMLStyledProps` Props for the root element.
`startColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color at the animation start.