渐变微光加载动画（Gradient Shimmer 流光进度条）

效果演示（真实可交互）

渐变条内层三色渐变持续横向流动，外层一道白色高光周期扫过，双层叠加出”微光”质感。海蓝 / 落日 / 森林三套渐变一键切换，速度滑块实时控制流动节奏。

完整代码

HTML 结构：

<div class="gs-bar">
  <span class="gs-fill"></span>      <!-- 渐变流动层 -->
  <span class="gs-shimmer"></span>   <!-- 高光扫过层 -->
</div>

CSS 核心：

.gs-bar {
  --gs-dur: 2.4s;
  --gs-a: #5ad8ff; --gs-b: #6c8cff; --gs-c: #b388ff;
  position: relative; width: 320px; height: 22px;
  border-radius: 999px; overflow: hidden;
  background: #e3e8f5;               /* 轨道底色 */
}

/* 渐变流动层：背景放大 3 倍后平移，形成连续流动 */
.gs-fill {
  position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gs-a), var(--gs-b), var(--gs-c), var(--gs-a));
  background-size: 300% 100%;
  animation: gs-flow var(--gs-dur) linear infinite;
}
@keyframes gs-flow { to { background-position: 300% 0; } }

/* 高光扫过层：白亮斜带从右向左掠过 */
.gs-shimmer {
  position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: gs-sweep calc(var(--gs-dur) * 1.2) ease-in-out infinite;
}
@keyframes gs-sweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

JS（调速）： stage.style.setProperty('--gs-dur', (2.4 / speed).toFixed(2) + 's')，两层面板共用同一变量，节奏始终同步。

参数说明

兼容性与性能

• 两层面板都只动 background-position，属合成器可优化的属性，不触发重排
• 兼容 Chrome / Firefox / Safari / Edge 最新版，移动端表现一致
• 渐变与扫光均为纯 CSS，无定时器、无 JS 计算，页面空闲时几乎零 CPU 占用
• 高光层白色透明度较高，深色主题下建议换成 rgba(255,255,255,.35) 或深色高光
• 适合 AI 回复生成、文件解析、报表计算等”不可预估时长”的等待场景，比转圈更能传递”正在处理”的语义

常见问题

Q: 渐变看起来是跳动的而不是流动的？ 检查 background-size 是否设为 300% 100%，且 keyframes 终点 background-position 与尺寸倍数一致（300% 对应 300% 0），否则首尾无法无缝衔接。

Q: 想要一条不确定宽度的加载条（Indeterminate）？ 把 .gs-fill 改为 width: 40% 并在容器内左右往返移动（animation: gs-slide 配合 left 或 translateX），其余不变。

Q: 高光扫过太刺眼怎么办？ 降低高光层透明度，或把渐变角度从 105° 调到 120°，让亮带更细更长，观感更柔和。

Q: 能用在深色背景上吗？ 可以，给 .gs-bar 的轨道底色换成深灰（如 #232a4d），三色渐变本身亮度足够，深浅背景都适用。