骨架屏微光
Skeleton Shimmer
灰色占位块上有一道亮光反复扫过，表示内容还在加载。
- 又叫：
- 骨架屏
- 微光扫过
- 加载占位
- shimmer loading
- skeleton screen
- content placeholder
- 展厅
- 交互反馈
- 形态
- 固定舞台
- 播放
- 常驻循环
- 关键词
- 纯 CSS / 渐变 / 重绘开销 / 动效较多 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个骨架屏微光（skeleton shimmer）：按最终布局摆好占位块，灰色底用 color-mix(in srgb, currentColor 12%, transparent)。再加一层覆盖的 linear-gradient 高光带，宽度约 32%，用 transform: translateX 从 -100% 平移到 100%，1400ms linear infinite 循环，不要动 width 或 background-position。头像圆加 3 行文本占位。系统减少动态效果时去掉扫光，只留静态占位。
skeleton screen with shimmer, placeholder blocks at currentColor 8-12%, overlay linear-gradient highlight band 32% wide, @keyframes shimmer { from { transform: translateX(-100%) } to { transform: translateX(100%) } }, 1400ms linear infinite, 3 text rows + avatar circle, animate transform only (never width/background-position), static under prefers-reduced-motion
https://publieople.github.io/design-museum/entry/skeleton-shimmer/?stage=light
链接带着你调好的参数
什么时候用
- 列表或卡片的数据还没到，先用占位块把布局占住
- 图片加载前的占位，避免内容一到位整页跳动
- 想比转圈更明确地预告「这里马上会出现什么」
适用场景：列表 / 卡片 / 页面
推荐取值
- 单次扫过
- 1.2–1.8s
- 高光带宽
- 容器的 20%–40%
- 骨架底色
- 当前文字色 8%–12%
- 高光
- 当前文字色 40%–55%
- 占位圆角
- 与真实内容一致
别搞混
和「转圈 loading（spinner）」的区别
spinner 不透露内容形状，只表示忙；骨架屏按最终布局摆好占位块，内容换了位置也不跳。
和「进度条（progress bar）」的区别
进度条表示可量化的进度（比如 30%）；骨架屏表示时长未知的等待，只能靠反复扫光暗示还在动。
容易踩的坑
- 扫光用 background-position 或 width 动画会不停重绘，用覆盖层做 transform: translateX 更省
- 骨架停留超过 5–8 秒还没内容，用户会以为坏了，要有超时文案或兜底
- 骨架的圆角、间距、行数和真实内容差太远，内容一进来整页会跳
- 高光带太宽或对比太强会很吵，宽度取容器的 20%–40%，多条骨架共用同一个 animation 保持同步
无障碍降级
prefers-reduced-motion: reduce 下去掉扫光动画，只留静态占位块；如果要保留一点动静，改成不移动的透明度呼吸并拉长周期。
关键词
- skeleton screen
- @keyframes shimmer
- linear-gradient
- transform: translateX
- content placeholder
- CLS