Loader Dots Wave

Pratinjau

Tiga variasi ukuran ditampilkan pada latar belakang gelap.

Kasus penggunaan dan fitur

• Memuat/memproses tampilan: Digunakan untuk memberi tahu pengguna tentang menunggu saat membuat permintaan API, mengambil data, dll.

• Anda dapat dengan bebas mengubah jumlah titik: Cukup tambahkan/hapus elemen div.dot di HTML.

• CSS Murni: Tidak diperlukan JavaScript. Dapat disematkan langsung ke elemen tampilan.

• Aksesibilitas: Pembaca layar kompatibel dengan menambahkan aria-label="Loading" dan role="status".

Poin desain dan UX

1. Penundaan 0,16 detik untuk setiap titik: Penundaan ini menciptakan ritme visual yang bergelombang.

2. ease-in-out: Setiap titik tampak memiliki pantulan elastis.

3. opacity fade: Efek visual menari ringan dengan mengurangi opacity seiring naiknya.

Cara menyesuaikan

Variasi ukuran (SM/MD/LG)

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

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

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

Mengubah kecepatan animasi

/* Lebih cepat */

.dot { animation-duration: 0.8s; }



/* Terlambat */

.dot { animation-duration: 2s; }

Warna khusus

.dot { background: #f97316; } /* oranye */

Kode implementasi

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

Status kompatibilitas peramban

| Peramban | Status kompatibilitas |

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

| Chrome 43+ | ✅ Sepenuhnya kompatibel |

| Firefox 16+ | ✅ Sepenuhnya kompatibel |

| Safari 9+ | ✅ Sepenuhnya kompatibel |

| Tepi 79+ | ✅ Sepenuhnya kompatibel |