加载动画 环形旋转
优秀加载动画合集
以下 10 个加载动画均为纯 CSS 实现，无依赖、可改色。每张卡片含「效果演示」与「HTML + CSS 源码」，复制即可使用。
1. 环形旋转 Spinner
最通用 · 单色环 + 品牌色描边
<!-- HTML -->
<div class="jz-spin"></div>
/* CSS */
.jz-spin{width:42px;height:42px;border:4px solid #eef2ff;border-top-color:#2f54ff;border-radius:50%;animation:jz-spin 1s linear infinite}
@keyframes jz-spin{to{transform:rotate(360deg)}} 改色：把 #2f54ff 换成你的品牌色即可2. 三点跳动 Dots
聊天/加载中 · 错峰节奏
<!-- HTML -->
<div class="jz-dots"><i></i><i></i><i></i></div>
/* CSS */
.jz-dots{display:flex;gap:8px}
.jz-dots i{width:14px;height:14px;border-radius:50%;background:#2f54ff;animation:jz-bounce 1.2s ease-in-out infinite}
.jz-dots i:nth-child(2){animation-delay:.15s}
.jz-dots i:nth-child(3){animation-delay:.3s}
@keyframes jz-bounce{0%,80%,100%{transform:scale(.5);opacity:.5}40%{transform:scale(1);opacity:1}} 加第 4、5 个点只需多放 <i></i> 并补 animation-delay3. 波浪条 Wave
音频/数据 · 五柱起伏
<!-- HTML -->
<div class="jz-wave"><i></i><i></i><i></i><i></i><i></i></div>
/* CSS */
.jz-wave{display:flex;align-items:flex-end;gap:6px;height:46px}
.jz-wave i{width:8px;background:#2f54ff;border-radius:4px;animation:jz-wave 1s ease-in-out infinite}
.jz-wave i:nth-child(1){height:100%}
.jz-wave i:nth-child(2){animation-delay:.1s}
.jz-wave i:nth-child(3){animation-delay:.2s}
.jz-wave i:nth-child(4){animation-delay:.3s}
.jz-wave i:nth-child(5){animation-delay:.4s}
@keyframes jz-wave{0%,100%{height:30%}50%{height:100%}}4. 双色双旋 Dual
双描边渐变 · 更精致
<!-- HTML -->
<div class="jz-dual"></div>
/* CSS */
.jz-dual{width:50px;height:50px;border-radius:50%;border:4px solid transparent;border-top-color:#2f54ff;border-bottom-color:#00c2ff;animation:jz-spin 1.2s linear infinite}
@keyframes jz-spin{to{transform:rotate(360deg)}}5. 脉冲 Pulse
雷达/定位 · 扩散感
<!-- HTML -->
<div class="jz-pulse"></div>
/* CSS */
.jz-pulse{width:46px;height:46px;border-radius:50%;background:#2f54ff;animation:jz-pulse 1.3s ease-out infinite}
@keyframes jz-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.4);opacity:0}}6. 翻转立方体 Cube
3D 感 · 加载占位
<!-- HTML -->
<div class="jz-cube"></div>
/* CSS */
.jz-cube{width:36px;height:36px;background:#2f54ff;animation:jz-flip 1.4s ease-in-out infinite}
@keyframes jz-flip{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-180deg)}}7. 竖条缩放 Bars
音乐/进度 · 序列缩放
<!-- HTML -->
<div class="jz-bars"><i></i><i></i><i></i><i></i><i></i></div>
/* CSS */
.jz-bars{display:flex;gap:5px}
.jz-bars i{width:6px;height:26px;background:#2f54ff;border-radius:3px;animation:jz-bars 1s ease-in-out infinite}
.jz-bars i:nth-child(2){animation-delay:.15s}
.jz-bars i:nth-child(3){animation-delay:.3s}
.jz-bars i:nth-child(4){animation-delay:.45s}
.jz-bars i:nth-child(5){animation-delay:.6s}
@keyframes jz-bars{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}8. 三环旋转 Rings
多实例 · 同频错峰
<!-- HTML -->
<div class="jz-ring"><i></i><i></i><i></i></div>
/* CSS */
.jz-ring{display:flex;gap:10px}
.jz-ring i{width:14px;height:14px;border-radius:50%;border:3px solid #2f54ff;border-top-color:transparent;animation:jz-spin .8s linear infinite}
.jz-ring i:nth-child(2){animation-delay:.12s}
.jz-ring i:nth-child(3){animation-delay:.24s}
@keyframes jz-spin{to{transform:rotate(360deg)}}9. 渐变文字 Shimmer
品牌化 · 流光文字
LOADING
<!-- HTML -->
<div class="jz-text">LOADING</div>
/* CSS */
.jz-text{font-weight:800;font-size:22px;letter-spacing:1px;background:linear-gradient(90deg,#2f54ff,#00c2ff,#2f54ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:jz-shimmer 1.6s linear infinite}
@keyframes jz-shimmer{to{background-position:200% center}}10. 骨架屏 Skeleton
内容占位 · 降低等待焦虑
<!-- HTML -->
<div class="jz-skeleton"><div class="sk lg"></div><div class="sk"></div><div class="sk"></div></div>
/* CSS */
.jz-skeleton{width:130px;display:grid;gap:8px}
.jz-skeleton .sk{height:12px;border-radius:6px;background:linear-gradient(90deg,#eef1f8 25%,#e2e8f5 37%,#eef1f8 63%);background-size:400% 100%;animation:jz-sk 1.4s ease infinite}
.jz-skeleton .sk.lg{height:30px;width:70%}
@keyframes jz-sk{0%{background-position:100% 0}100%{background-position:-100% 0}}