骨架按钮（骨架屏占位加载/微光扫过特效源码）

效果演示（真实可交互）

骨架屏用微光扫过动画，加载完成淡入真实内容

完整代码

HTML 结构：

<div class="sk-card">
  <!-- 骨架层 -->
  <div id="sk-skeleton" class="sk-skeleton">
    <span class="sk-block sk-line"></span>
    <span class="sk-block sk-line sk-line-short"></span>
    <span class="sk-block sk-btn-ph"></span>
  </div>
  <!-- 真实内容层 -->
  <div id="sk-real" class="sk-real" hidden>
    <h4 class="sk-title">粤喵组件库</h4>
    <p class="sk-desc">骨架按钮：先占位、后填充。</p>
    <button class="sk-action">立即体验</button>
  </div>
</div>

CSS 核心代码：

/* 骨架块：微光扫过 */
.sk-block { position: relative; background: #262c3f;
  border-radius: 8px; overflow: hidden; }
.sk-block::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%,
    rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }
.sk-btn-ph { height: 42px; border-radius: 10px; width: 100%; }

JS 切换逻辑：

const skeleton = document.getElementById('sk-skeleton');
const real = document.getElementById('sk-real');
trigger.addEventListener('click', () => {
  skeleton.hidden = true;   // 隐藏骨架
  real.hidden = false;      // 显示真实内容（CSS 淡入）
});

参数说明

兼容性与性能

• 骨架屏方案完全基于 CSS 伪元素 + transform 动画，零依赖零 JS 依赖（切换逻辑可换任意框架）
• transform 动画不触发重排，多骨架块同时扫光也不卡顿；overflow: hidden 确保光带不溢出圆角
• 骨架颜色建议用 currentColor 或 CSS 变量，方便跟随明暗主题
• 真实场景中把 setTimeout 换成接口返回的 Promise，在 then/finally 中执行切换即可

常见问题

Q: 骨架按钮和普通 loading 有什么区别？ 骨架展示的是「结构占位」——文字、按钮等形状先画出来，适合页面级加载；普通 loading 是按钮内的转圈，适合单点操作。两者常配合使用。

Q: 光带扫过的方向能改吗？ 可以，改 translateX(-100%) 为 translateY(-100%) 并配合 linear-gradient(180deg, ...) 即变为垂直扫光。

Q: 如何适配暗色主题？ 把骨架底色和光带颜色抽成 CSS 变量，如 --sk-bg / --sk-shine，在 @media (prefers-color-scheme: dark) 下覆盖即可。

Q: 数据加载失败时怎么处理？ 保留骨架层，在骨架层内追加一条错误占位（如「加载失败，点击重试」），点击后重新请求并再次进入骨架态。