Spinner 加载动画第二弹（双环/波浪/立方体等 6 款）

效果演示（真实可交互）

本页是加载动画合集的第二弹，6 款风格与第一批 12 款完全不同：双环对转适合通用场景、均衡器竖条适合音频类产品、3D 立方体与翻转方块适合科技感页面、轨道行星适合太空主题、旋转花瓣适合女性向或礼品类产品。

完整代码

① 双环对转（两圈反向旋转，层次感强）：

<div class="dual-ring"></div>

.dual-ring {
  width: 44px; height: 44px; position: relative;
  border: 3px solid rgba(108,140,255,.18);
  border-top-color: #6c8cff; border-radius: 50%;
  animation: rot .8s linear infinite;
}
.dual-ring::after {
  content: ''; position: absolute; inset: 6px;
  border: 3px solid rgba(179,136,255,.2);
  border-bottom-color: #b388ff; border-radius: 50%;
  animation: rot .6s linear infinite reverse;
}
@keyframes rot { to { transform: rotate(360deg); } }

④ 轨道行星（公转效果，一颗亮点绕轨道运行）：

<div class="orbit">
  <i class="wrap"><i class="planet"></i></i>
</div>

.orbit { width: 44px; height: 44px; border: 2px solid rgba(108,140,255,.22); border-radius: 50%; position: relative; }
.orbit::before { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
  background: #6c8cff; border-radius: 50%; transform: translate(-50%, -50%); }
.wrap { position: absolute; inset: 0; animation: spin 1.4s linear infinite; }
.planet { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: linear-gradient(135deg, #ffb36c, #ff6b8a); }
@keyframes spin { to { transform: rotate(360deg); } }

其余 4 款（均衡器竖条、3D 立方体、翻转方块、旋转花瓣）见演示区 .sp2-* 系列：竖条与花瓣用 nth-child 错开延迟，立方体用六面 translateZ 拼合后整体旋转，翻转方块用 perspective 加 rotateX。全部纯 CSS 零依赖。

参数说明

兼容性与性能

• 全部使用 transform / opacity 动画，GPU 加速，60fps 流畅
• 3D 立方体与翻转方块基于 CSS preserve-3d 与 perspective，现代浏览器全支持；Safari 建议加 -webkit- 前缀做兼容
• 单个 spinner 体积小于 1KB，对页面性能零影响
• 大量使用时建议每屏不超过 20 个，动画元素过多会占用合成层内存

常见问题

Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。

Q: 3D 立方体在 Safari 上显示扁了？ 给 .sp2-cube 和 span 补上 -webkit-transform-style: preserve-3d 与 -webkit-perspective，老版本 Safari 需要前缀。

Q: 花瓣想改成 6 片怎么做？ 删掉第 7、8 个 <i>，并把 animation-delay 的步长从 .15s 改成 .2s（1.2s ÷ 6），保证一圈节奏均匀。

Q: 想要纯色而不是渐变怎么办？ 把 background: linear-gradient(...) 换成单一 background: #6c8cff 即可，代码里所有渐变背景都可直接替换。