Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

Skeleton

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

Source@yamada-ui/skeleton

Props

SkeletonProps

colorScheme

Description

The visual color appearance of the component.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"

endColor

Description

The color at the animation end.

Type

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

fadeDuration

Description

The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.

Type

string | number

Default

0.4

isFitContent

Description

If true, the skeleton will take the width of it's children.

Type

boolean

Default

false

isLoaded

Description

If true, it'll render its children with a nice fade transition.

Type

boolean

Default

false

size

Description

The size of the Skeleton.

Type

string

speed

Description

The animation speed in seconds.

Type

string | number

Default

0.8

startColor

Description

The color at the animation start.

Type

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

variant

Description

The variant of the Skeleton.

Type

string

SkeletonCircleProps

endColor

Description

The color at the animation end.

Type

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

fadeDuration

Description

The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.

Type

string | number

Default

0.4

isFitContent

Description

If true, the skeleton will take the width of it's children.

Type

boolean

Default

false

isLoaded

Description

If true, it'll render its children with a nice fade transition.

Type

boolean

Default

false

speed

Description

The animation speed in seconds.

Type

string | number

Default

0.8

startColor

Description

The color at the animation start.

Type

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

SkeletonTextProps

endColor

Description

The color at the animation end.

Type

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

fadeDuration

Description

The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.

Type

string | number

Default

0.4

isLoaded

Description

If true, it'll render its children with a nice fade transition.

Type

boolean

Default

false

speed

Description

The animation speed in seconds.

Type

string | number

Default

0.8

startColor

Description

The color at the animation start.

Type

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

textHeight

Description

The CSS height property.

Type

UIValue<number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "1" | "2" | "3" | "4" | "5" | "6" | ... 63 more ... | "9xl">

Edit this page on GitHub

PreviousLoadingNextProgress