骨架屏加载动画（Skeleton Screen 占位加载 4 款）

效果演示（真实可交互）

点击上方「加载完成」按钮，即可体验骨架屏切换为真实内容的完整流程；再点「重新加载」恢复骨架屏状态。

完整代码

HTML（以文章卡片骨架为例）：

<div class="skeleton-card">
  <div class="sk-media"></div>
  <div class="sk-line w70"></div>
  <div class="sk-line w90"></div>
  <div class="sk-line w55"></div>
</div>

CSS（扫光核心 + 占位块）：

.skeleton-card { background: #fff; border-radius: 14px; padding: 16px; }

/* 占位块：灰色圆角块 */
.sk-media, .sk-line {
  position: relative; overflow: hidden;
  background: #e9edf6; border-radius: 6px;
}
.sk-media { height: 96px; margin-bottom: 12px; }
.sk-line  { height: 12px; margin: 10px 0; }
.w70 { width: 70%; } .w90 { width: 90%; } .w55 { width: 55%; }

/* 扫光动画：一道高光从左向右循环掠过 */
.sk-media::after, .sk-line::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sweep 1.5s ease-in-out infinite;
}
@keyframes sweep { 100% { transform: translateX(100%); } }

其余 3 种骨架（个人主页、消息列表、图片网格）的结构见演示区 .sk-* 系列，只需把占位块换成头像（圆形）、标签（小圆角块）、网格瓦片等形状即可，动画共用同一套扫光。加载完成切换逻辑见演示区脚本：用 hidden 属性在骨架容器与真实内容容器之间切换，零成本实现。

参数说明

兼容性与性能

• 动画仅使用 transform: translateX（GPU 合成层），扫光过程 60fps 流畅，不触发重排
• 兼容 Chrome / Firefox / Safari / Edge 最新版，移动端表现一致
• 骨架屏只在首屏数据请求期间渲染，请求完成后即从 DOM 移除，无长期性能开销
• 与懒加载、图片占位（aspect-ratio）组合使用效果更佳；建议同一屏骨架数量不超过 10 个，避免占位块过多造成的视觉噪音

常见问题

Q: 骨架屏能商用吗？ 可以。本组件为粤喵自研，MIT 友好的免费商用，无需署名。

Q: 数据加载很快，骨架屏一闪而过怎么办？ 可给骨架屏设置最小展示时长（如 300ms），或在 requestAnimationFrame 中延迟移除，避免闪烁（FOUC）。

Q: 怎么让扫光只扫一次而不是无限循环？ 把 infinite 去掉，并在数据到达时移除整个骨架容器即可；也可以把 animation-iteration-count 设为 2-3 次。

Q: 图片加载时想用骨架屏占位怎么办？ 给图片外层包一个 .sk-media 占位块，图片加载完成（load 事件）后给占位块加 display: none 或移除类名即可。