COMPONENT 45 · Feedback & Status

骨架屏

Skeleton Screen

也叫Skeleton LoaderContent Placeholder骨架加载

用内容形状占位，预示正在加载的页面结构。

Uses placeholder shapes to preview the layout while content is loading.

ANATOMY & USAGE

结构与使用建议

组成部分

文本占位条
媒体占位块
加载容器

适合使用

内容布局稳定且等待时间足以感知时。

不建议使用

无法预测最终布局或会造成内容跳动误导时。

键盘与无障碍

骨架对辅助技术隐藏，并提供简洁的加载状态；减少动态模式关闭闪烁动画。

DESCRIBE IT TO AI

这样告诉编程助手

实现骨架屏（Skeleton Screen）：用内容形状占位，预示正在加载的页面结构。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo stack" role="status">
  <span class="muted">正在加载内容…</span>
  <div class="skeleton" aria-hidden="true">
  </div>
  <div class="skeleton short" aria-hidden="true">
  </div>
</div>