给反馈
骨架屏
Skeleton
「灰色的占位块」「加载前的灰轮廓」「一闪一闪的灰条」「内容没来先摆的框」「假页面灰块」「白灰相间的加载」「还没刷出来的轮廓」
LIVE DEMO真实可交互，动手试试
- 英文名
- Skeleton
- 别名 · 俗称
- 骨架加载灰色占位块内容占位屏shadcn: Skeleton
- Web 叫法
- Skeleton
- 大白话定义
- 内容没加载完时先摆出灰色轮廓块，样子像最终页面，减少干等的焦虑。
- 部位拆解
- 占位块 Block灰色圆角矩形，模仿标题或图片
- 微光动画 Shimmer灰块上扫过的微光，表示在加载
- 布局 Layout轮廓与真实内容位置一一对应
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
文章加载前显示骨架屏（Skeleton）：灰色长条仿标题、方块仿封面，数据到了再替换成真内容
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的骨架屏（Skeleton）。逐一排除：骨架尺寸和真实内容不一致，加载完成瞬间布局跳动；animate-pulse 灰块在深色模式下对比度过低看不清；容器没加 aria-busy，读屏用户不知道内容在加载；微光动画在 prefers-reduced-motion 下没关闭。症状是：