Skeleton

Skeleton loading component with multiple animation effects and shapes

动效形态

不同动画效果的骨架屏

Pulse (默认)

Shimmer (闪光)

Wave (波浪)

Bounce (弹跳)

Glow (发光)

Striped (条纹)

颜色变体

不同颜色的骨架屏,可用于表示不同状态

Default
Accent
Success
Warning
Info

案例展示

Skeleton 在实际场景中的使用示例

卡片骨架 (Shimmer 效果)

列表骨架 (Wave 效果)

社交媒体帖子骨架

表格骨架

商品网格骨架

聊天消息骨架

仪表盘骨架

基础形状

不同形状的骨架占位符

Circle

Square

Rectangle

Text Line

Scribble

组合骨架

多个骨架元素组合使用

尺寸变化

不同高度的骨架屏

h-2
h-4
h-6
h-8