波浪圆点加载动画

预览

深色背景上显示三种尺寸变化。

小

中号（青色）

大号（玫瑰色）

用例和功能

加载/处理显示：用于在发出API请求、获取数据等时通知用户等待。
您可以自由更改点的数量：只需添加/删除 HTML 中的 div.dot 元素即可。
纯 CSS：不需要 JavaScript。可以直接嵌入到显示元素中。
辅助功能：通过添加 aria-label="Loading" 和 role="status" 来兼容屏幕阅读器。

设计和用户体验要点

每个点延迟 0.16 秒：此延迟会产生起伏的视觉节奏。
ease-in-out曲线：每个点似乎都有弹性弹跳。
opacity淡入淡出：随着不透明度的上升而减少，产生轻快的舞蹈视觉效果。

如何定制

尺寸变化（SM / MD / LG）


.dot-sm { width: 8px; height: 8px; }

.dot-md { width: 12px; height: 12px; }

.dot-lg { width: 18px; height: 18px; }

改变动画速度


/* 更快 */

.dot { animation-duration: 0.8s; }



/* 迟到 */

.dot { animation-duration: 2s; }

自定义颜色


.dot { background: #f97316; } /* 橙色 */

实现代码

<div class="dots-row" role="status" aria-label="Loading">

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

</div>



<style>
.dots-row { display: flex; align-items: center; gap: 0.5rem; }

.dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #6366f1;

animation: dots-wave 1.4s ease-in-out infinite;

}

.dot:nth-child(1) { animation-delay: 0s; }

.dot:nth-child(2) { animation-delay: 0.16s; }

.dot:nth-child(3) { animation-delay: 0.32s; }

.dot:nth-child(4) { animation-delay: 0.48s; }

.dot:nth-child(5) { animation-delay: 0.64s; }

@keyframes dots-wave {

0%, 60%, 100% { transform: translateY(0); opacity: 1; }

30% { transform: translateY(-12px); opacity: 0.7; }

}
</style>

浏览器兼容性状态

|浏览器 |兼容性状态 |

|--------|--------|

| Chrome 43+ | ✅ 完全兼容 |

|火狐 16+ | ✅ 完全兼容 |

| Safari 9+ | ✅ 完全兼容 |

|边缘 79+ | ✅ 完全兼容 |