跳到主要内容

Skeleton 骨架

内容还没到的时候先把它的轮廓画出来,等真内容来了原地替换,页面不跳。加载通常超过一秒、而且知道内容大概长什么样时用;否则用 Spinner。

三种形状

text 是一条文字(默认高 12),circle 是头像,rect 是图片或卡片块。width / height 接受数字(px)或 CSS 长度。

多行文字

lines 渲染几行,最后一行自动短一些(70%)。

拼成内容的样子

用几块骨架拼出真实内容的布局,并在外层容器上标 aria-busy。

规格

高光
扫过 · 1.6s 线性循环
圆角
文字 8 · 方块 12 · 圆形全圆
减弱动效
高光停下,只留静态底色

接口

属性

属性类型默认值说明
variant'text' | 'circle' | 'rect''text'形状。
widthnumber | string—宽度。text / rect 默认撑满;circle 默认 40。
heightnumber | string—高度。text 默认 12,rect 默认 96;circle 默认等于宽度。
linesnumber1text 时渲染几行,最后一行短一些。

无障碍

  • 骨架是纯装饰,自带 aria-hidden,读屏完全读不到。
  • 所以“正在加载”要另外告诉读屏:在外层容器上标 aria-busy="true",必要时再加一段只给读屏的“加载中”文字(或一个 Spinner)。
  • 内容到了之后去掉 aria-busy。骨架不可聚焦,没有键盘操作。
  • 减弱动效时高光不再扫过。