Preview

Xem trước

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

nhỏ bé

Trung bình (màu xanh mòng két)

Lớn (Hồng)

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

Độ 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ô.

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

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>