Skip to content

Skeleton 骨架屏

在内容加载前展示占位图形,减少用户等待时的视觉跳动。

基础用法

通过 style 设置宽高,控制骨架屏的尺寸。

html
<g1-skeleton style="width:100%;height:16px" />
<g1-skeleton style="width:50%;height:16px" />
<g1-skeleton style="width:150px;height:16px" />

圆形

配合 border-radius: 50% 实现头像占位效果。

html
<g1-skeleton style="width:150px;height:150px;border-radius: 50%" />

卡片占位

模拟卡片内容加载状态。

html
<g1-skeleton style="width:260px;height:140px;border-radius:8px" />