Skeleton

Provide placeholder graphics at locations where content is loading. Combines convenient layouts, advanced animations, and high flexibility from mainstream UI frameworks.

Basic Usage

The most basic plain text line skeleton.

Basic Usage

Common Layouts

Quickly build common list item layouts via avatar, title, and rows.

Common Layouts

Fine-grained Item Control (SkeletonItem)

When built-in layouts don't meet your needs, you can freely assemble using YhSkeletonItem. Supports various semantic variants like circle, rect, text, button, image, etc.

Item Control Demo

Creative: Advanced Cards

Easily implement complex card streaming skeletons using variant="image" and the repeat prop.

Card Skeleton

Custom Advanced Features

1. Smart Throttling (Throttle)

Set a delayed display time via the throttle prop. If async data loads within the set time, the skeleton will never appear. This effectively eliminates the "anxiety" caused by skeleton flickering when network conditions are good.

2. Viewport Detection (Lazy Animation)

When lazy is enabled, the skeleton shimmer animation only starts when the element enters the viewport. This significantly reduces GPU usage for invisible elements in long list pages, representing the ultimate performance optimization practice.

3. Polymorphic Rendering (Polymorphic)

The variant of SkeletonItem covers all atomic elements in mainstream interaction design mockups, ensuring high fidelity from design to code.

Use in Nuxt

YhSkeleton is fully optimized for Nuxt/SSR environments, automatically degrading to a safe rendering mode.

Use in Nuxt

API

Skeleton Props

Prop	Description	Type	Default
loading	Whether to show loading rendering	boolean	true
animated	Whether to enable shimmer animation	boolean	true
rows	Number of rows for default layout	number	3
title	Whether to render title placeholder	boolean	false
avatar	Whether to render circular avatar placeholder	boolean	false
throttle	Delay in milliseconds before showing, prevents flickering	number	0
lazy	Only start animation when in viewport (advanced feature)	boolean	false

SkeletonItem Props

Prop	Description	Type	Default
variant	Variant type (circle, rect, h1, h3, text, button, image)	string	'text'
width	Width	string | number	—
height	Height	string | number	—
animated	Whether to enable shimmer animation	boolean	true
round	Whether to have rounded corners	boolean	false
sharp	When true, explicitly set to sharp corners	boolean	false
repeat	Number of times to render (practical feature)	number	1

Theme Variables

Variable	Description	Default
--yh-skeleton-bg-color	Skeleton base background color	var(--yh-fill-color-dark)
--yh-skeleton-shimmer-color	Animation shimmer color	var(--yh-fill-color-light)