文字加载点点点动画（Loading Dots 4 款 CSS）

效果演示（真实可交互）

演示区展示了 4 种「加载中 + 点点点」的经典形态：弹跳点最有活力、渐隐点最克制、波浪点适合 AI 生成场景、省略号适合表单提交按钮。全部为纯 CSS 动画，无需任何 JS。

完整代码

① 弹跳三点（最常用）：

<p class="loading-text">正在加载<span class="dots bounce"><i></i><i></i><i></i></span></p>

.dots { display: inline-flex; gap: 5px; margin-left: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #6c8cff; display: inline-block;
  animation: bounce 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-8px); opacity: 1; }
}

④ 省略号递增（零 HTML，一个伪元素搞定）：

<p class="loading-ellipsis">提交中</p>

.loading-ellipsis::after {
  content: '...'; display: inline-block; overflow: hidden; vertical-align: bottom;
  width: 0; animation: ellipsis 1.5s steps(4, end) infinite;
}
@keyframes ellipsis { to { width: 1.25em; } }

②③ 款（渐隐、波浪）与 ① 结构完全相同，只需把 .bounce 换成 .fade / .wave 类并带上对应 @keyframes（见演示区 .tld-* 系列）即可。

参数说明

兼容性与性能

• 全部使用 transform 和 opacity 动画，GPU 加速，60fps 流畅
• 第 ④ 款用 steps() 分步动画模拟逐点出现，兼容所有现代浏览器
• 每个点体积忽略不计，几十个同时运行也毫无压力
• 建议：加载结束后连同文案一起移除（或改文案为结果状态），避免残留动画元素

常见问题

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

Q: 点太小看不清怎么办？ 增大 width/height，同时把弹跳的 translateY 幅度加大，并让三个点错开 animation-delay，节奏感会更强。

Q: 想用「•••」代替圆点怎么办？ 把 <i> 圆点换成文字符号（如 •），或者直接把 .tld-dots i 的 border-radius 去掉变成小方块，风格立即切换。

Q: 省略号动画在按钮里显示不全？ 按钮若设置了 overflow: hidden，伪元素的宽度动画会被裁剪。给按钮去掉 overflow: hidden，或把动画放到按钮外层包裹元素上。