Skeleton
骨架屏：loading 切换占位/真实内容，active 开启 shimmer 流光动画；提供 Avatar / Image / Title / Button / Paragraph 五个原子占位形状自由组合。镜像 Semi：占位根节点为纯 <div class="cd-skeleton">，active 挂根容器类经后代选择器作用到骨架块。loading 受控不回写。
如何引入
import { Skeleton, SkeletonAvatar, SkeletonImage, SkeletonTitle, SkeletonButton, SkeletonParagraph } from '@chenzy-design/svelte';基础使用
通过 loading 切换骨架占位与真实内容，覆盖 Avatar / Image / Title / Paragraph / Button 五种原子形状。
显示加载内容
加载动画
active 开启 shimmer 流光动画，关闭则退化为静态底色。
active：shimmer 流光动画开启
组合：图片和标题
SkeletonImage + SkeletonTitle 组合成图文占位模板。
组合：统计数字
SkeletonParagraph + SkeletonTitle 占位统计数字，loading 切换为真实 Descriptions。
组合：头像和标题
SkeletonAvatar + SkeletonTitle 水平组合，loading 切换为真实头像与文案。
组合：居中段落和按钮
居中排布的 SkeletonParagraph + SkeletonButton 占位模板。
组合：头像、标题和段落
头像 + 标题 + 多行段落完整占位，active 开启动画。
组合：表格
用 SkeletonParagraph 填充表格单元格占位，loading 切换为真实 Table。
| Name | Age | Address |
|---|---|---|
| | | |
| | | |
| | | |
| | | |
API 参考
Skeleton
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
loading | true 显示占位元素，false 显示子组件；受控不回写 | boolean | true |
active | 是否展示 shimmer 动画效果 | boolean | false |
placeholder | 加载等待时的占位元素 | Snippet | undefined |
children | loading=false 时渲染的真实内容 | Snippet | undefined |
class | 容器类名（对齐 Semi className） | string | undefined |
style | 容器内联样式（对齐 Semi style） | string | undefined |
Slots
| 名称 | 说明 |
|---|---|
placeholder | 加载等待时的占位元素 |
children | loading=false 时渲染的真实内容 |
SkeletonAvatar
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 头像大小（对齐 Semi 6 档） | 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'medium' |
shape | 头像形状；circle → border-radius:50% | 'circle' | 'square' | 'circle' |
class | 类名 | string | undefined |
style | 内联样式（自定义尺寸经此透传，对齐 Semi） | string | undefined |
SkeletonImage
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 类名 | string | undefined |
style | 内联样式；默认 100%×100%，自定义尺寸经此透传 | string | undefined |
SkeletonTitle
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 类名 | string | undefined |
style | 内联样式；默认 width:100% height:24px | string | undefined |
SkeletonButton
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 类名 | string | undefined |
style | 内联样式；默认 width:115px height:32px | string | undefined |
SkeletonParagraph
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
rows | 段落占位行数；首行 100%、末行 60%、行高 16px、行距 10px | number | 4 |
class | 类名 | string | undefined |
style | 内联样式 | string | undefined |
Accessibility
- 镜像 Semi：占位根节点为纯 <div>，无 role/aria；骨架块为纯装饰 div，不进入 Tab 序列；prefers-reduced-motion 由使用方站点样式统一处理。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-animation-duration-skeleton-highlight | 1400ms | 骨架屏高亮动画时长 |
--cd-animation-function-skeleton-highlight | ease | 骨架屏高亮动画曲线 |