跳到主要内容
Termlib

UI 组件 · 反馈

骨架屏

Skeleton

也叫：骨架图、占位加载、Skeleton Screen、内容占位符

数据加载完成前，先用灰色块画出页面内容的大致轮廓，加载完再替换成真实内容。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

文章列表首次加载时显示骨架屏：每条左侧是 48px 灰色圆形头像占位，右侧一根宽 40% 的标题灰条和两根长短不一的正文灰条，共显示 5 条，带从左到右的浅色微光动画；数据返回后原位替换，尺寸与真实内容一致。

发给

01判断

你的内容是这样吗？

对照两列，确认骨架屏是不是你要找的。

符合这些情况，用骨架屏

  • 页面、列表或卡片首次加载，且内容结构事先已知
  • 加载时间在一到几秒，希望减少页面跳动和空白感
  • 信息流、商品列表这类由重复卡片组成的内容区

是这些情况，换成别的

  • 点击按钮后的短暂提交等待，用按钮内的加载中更合适

    改用加载中

  • 内容结构不固定，画不出和真实内容一致的轮廓

  • 耗时长且能拿到进度的任务，比如上传大文件

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    骨架形状和真实内容完全不同，数据回来后页面照样大幅跳动

  2. 02

    数据已经加载完了，还故意多显示一会儿骨架屏

  3. 03

    接口报错后骨架屏一直闪，没有切换到错误状态

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由若干与真实内容同尺寸的浅灰色块组成，如圆形头像块、标题条、段落条和图片块，常带微光扫过的动画。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一组浅灰色的圆形和长短不一的圆角横条
  2. 2没有任何文字，只有内容的轮廓
  3. 3灰块上可能有一道微光从左往右扫过

04解释

详细解释

骨架屏按真实内容的形状画灰色占位：头像位置画一个灰圆，标题位置画一根粗灰条，正文位置画几根长短不一的细灰条，通常带一道从左往右扫过的微光动画。数据回来后，灰块原地替换成真实内容，布局不会跳动，用户也能提前知道页面长什么样。

它适合页面、列表、卡片的 首次加载。和 加载中 的区别：转圈只说「在等」，骨架屏还提前给出结构；局部刷新、按钮提交这种小等待，用转圈更合适。和 进度条 的区别：进度条表示一件任务完成了多少，骨架屏不表达进度。骨架的形状要和真实内容一致，否则替换时照样会跳。

开发者信息
术语 ID
component-skeleton
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-skeleton
  • .el-skeleton
  • [class*="MuiSkeleton-root"]
  • .arco-skeleton
  • .t-skeleton
  • .n-skeleton
  • [data-slot="skeleton"]
  • .placeholder-glow
  • .placeholder-wave
  • .animate-pulse
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • skeleton
  • shimmer
  • skeleton-line
  • loading-skeleton
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Skeleton
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30