弹跳点加载动画（Bouncing Dots Loader 纯 CSS 实现）

效果演示（真实可交互）

拖动「速度」滑块可实时改变弹跳节奏（0.3× - 2.5×）；点击「暂停」可冻结动画，便于在浏览器里检查样式；三套配色（蓝 / 橙 / 绿）一键切换，观察不同品牌色下的表现。

完整代码

HTML 结构：

<div class="bd-dots">
  <i></i><i></i><i></i><i></i><i></i>
</div>

CSS 核心（弹跳动画 + 错落延迟）：

.bd-dots {
  --bd-dur: 1s;            /* 一个完整弹跳周期 */
  --bd-color: #6c8cff;     /* 圆点主色 */
  display: flex; gap: 10px;
}
.bd-dots i {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bd-color);
  animation: bd-bounce var(--bd-dur) ease-in-out infinite;
}
/* 每个点错开 0.1 个周期，形成波浪 */
.bd-dots i:nth-child(1) { animation-delay: calc(var(--bd-dur) * -0.4); }
.bd-dots i:nth-child(2) { animation-delay: calc(var(--bd-dur) * -0.3); }
.bd-dots i:nth-child(3) { animation-delay: calc(var(--bd-dur) * -0.2); }
.bd-dots i:nth-child(4) { animation-delay: calc(var(--bd-dur) * -0.1); }

@keyframes bd-bounce {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: .45; }
  30%           { transform: translateY(-26px) scale(1.12); opacity: 1; }
}

JS（可选，速度与暂停控制）：

// 速度：周期 = 基准 / 倍率
stage.style.setProperty('--bd-dur', (1 / speed).toFixed(2) + 's');
// 暂停：给容器加类，统一冻结所有圆点
dots.classList.toggle('paused', paused); // .paused i { animation-play-state: paused }

参数说明

兼容性与性能

• 动画只使用 transform 与 opacity，全程走 GPU 合成层，不触发重排重绘，60fps 流畅
• 全部语法兼容 Chrome / Firefox / Safari / Edge 最新版；color-mix 为渐进增强，旧浏览器仅失去阴影颜色同步，不影响动画本身
• 依赖 prefers-reduced-motion 的站点可在媒体查询中把动画时长设长或直接隐藏
• 5 个圆点仅 5 个合成层，性能开销可忽略；适合按钮加载态、首屏等待、图片懒加载占位等场景

常见问题

Q: 想让弹跳方向变成左右横跳怎么办？ 把 keyframes 里的 translateY 换成 translateX 即可，其余逻辑完全不用动，错落延迟同样生效。

Q: 加载完成后怎么移除动画？ 直接删除容器节点或加 display: none；如果希望平滑淡出，可先给容器加 opacity: 0 过渡，300ms 后再移除。

Q: 圆点在弱网/慢速环境还跳得这么快，会不会显得很急？ 建议把默认周期设为 1.2s 左右，并在数据到达前的骨架阶段使用；也可以在切换页面时用 JS 统一放大 --bd-dur。

Q: 可以商用吗？ 可以。本组件为粤喵自研，MIT 友好的免费商用协议，无需署名，改色改尺寸随意。