Loader Dots Wave

Xem trước

Ba biến thể kích thước được hiển thị trên nền tối.

Trường hợp sử dụng và tính năng

• Hiển thị đang tải/xử lý: Được sử dụng để thông báo cho người dùng về việc chờ đợi khi thực hiện yêu cầu API, tìm nạp dữ liệu, v.v.

• Bạn có thể tự do thay đổi số lượng dấu chấm: Chỉ cần thêm/xóa phần tử div.dot trong HTML.

• CSS thuần: Không cần JavaScript. Có thể được nhúng trực tiếp vào các phần tử hiển thị.

• Khả năng truy cập: Trình đọc màn hình tương thích bằng cách thêm aria-label="Loading" và role="status".

Điểm thiết kế và UX

1. Độ trễ 0,16 giây cho mỗi dấu chấm: Độ trễ này tạo ra nhịp điệu thị giác nhấp nhô.

2. ease-in-out: Mỗi dấu chấm dường như có độ nảy đàn hồi.

3. opacity mờ dần: Hiệu ứng hình ảnh ánh sáng nhảy múa bằng cách giảm độ mờ khi nó tăng lên.

Cách tùy chỉnh

Các biến thể kích thước (SM / MD / LG)

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

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

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

Thay đổi tốc độ hoạt ảnh

/* Nhanh hơn */

.dot { animation-duration: 0.8s; }



/* Muộn */

.dot { animation-duration: 2s; }

Màu tùy chỉnh

.dot { background: #f97316; } /* trái cam */

Mã triển khai

<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>

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích |

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

| Chrome 43+ | ✅ Hoàn toàn tương thích |

| Firefox 16+ | ✅ Hoàn toàn tương thích |

| Safari 9+ | ✅ Hoàn toàn tương thích |

| Cạnh 79+ | ✅ Hoàn toàn tương thích |