Preview

预览

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

小

中号（青色）

大号（玫瑰色）

用例和功能

加载/处理显示：用于在发出API请求、获取数据等时通知用户等待。

您可以自由更改点的数量：只需添加/删除 HTML 中的 div.dot 元素即可。

纯 CSS：不需要 JavaScript。可以直接嵌入到显示元素中。

辅助功能：通过添加 aria-label="Loading" 和 role="status" 来兼容屏幕阅读器。

如何定制

尺寸变化（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>

预览