Contoh Aplikasi

Beranda
CSS

Cara Membuat Loader Animasi Bouncing Dots dengan HTML dan CSS

Artikel berikut membahas mengenai Cara Membuat Loader Animasi Bouncing Dots dengan HTML dan CSS

Cara Membuat Loader Animasi Bouncing Dots dengan HTML dan CSS
Loader Animasi Bouncing Dots

Apakah kamu sedang mencari loader sederhana tapi menarik untuk proyek web kamu? Loader animasi dengan bouncing dots ini bisa menjadi pilihan tepat. Dengan kombinasi HTML dan CSS murni, kamu bisa membuat tampilan loading yang modern dan mobile-friendly tanpa library tambahan.

✨ Apa Itu Loader Bouncing Dots?

Loader Bouncing Dots adalah animasi loading berbentuk titik-titik berwarna yang melompat bergantian, memberikan efek dinamis saat halaman atau konten sedang dimuat. Loader ini:

  • Ringan dan cepat dimuat
  • Responsif di berbagai ukuran layar
  • Mudah dikustomisasi warnanya

🧰 Tools yang Dibutuhkan

Tidak memerlukan library tambahan! Cukup:

  • HTML5
  • CSS3

💻 Langkah-Langkah Membuat Loader Bouncing Dots

1. Struktur HTML Dasar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loader Bouncing Dots</title>
</head>
<body>
  <div style="text-align: center;">
    <div class="dots-container">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="loading-message">Preparing your content...</div>
  </div>
</body>
</html>

Penjelasan:

  • Elemen .dots-container membungkus empat elemen .dot.
  • Setiap .dot akan dianimasikan menggunakan CSS.

2. Gaya CSS untuk Loader

Tambahkan CSS berikut di dalam tag <style> atau file terpisah (loader.css):

body {
  margin: 0;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.dot {
  width: 20px;
  height: 20px;
  margin: 0 10px;
  border-radius: 50%;
  animation: bounce 1.5s infinite ease-in-out;
}

.dot:nth-child(1) { background: #4285f4; animation-delay: 0s; }
.dot:nth-child(2) { background: #ea4335; animation-delay: 0.2s; }
.dot:nth-child(3) { background: #fbbc05; animation-delay: 0.4s; }
.dot:nth-child(4) { background: #34a853; animation-delay: 0.6s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.loading-message {
  text-align: center;
  margin-top: 30px;
  color: #333;
  font-size: 18px;
}

Penjelasan Animasi:

  • Menggunakan @keyframes bounce untuk menciptakan efek naik-turun.
  • animation-delay digunakan untuk membuat lompatan titik-titik bergantian.

🎨 Kustomisasi Warna dan Ukuran

Kamu bisa mengganti warna .dot dengan palet favoritmu, atau menambahkan lebih banyak titik sesuai kebutuhan. Misalnya:

.dot:nth-child(1) { background: #6f42c1; }

Untuk ukuran, ubah width, height, atau translateY.

✅ Kelebihan Loader Ini

  • 🚀 Tidak butuh JavaScript
  • 📱 Mobile-friendly dan fleksibel
  • 🎨 Mudah diganti warna dan ukurannya
  • 🌐 Kompatibel dengan semua browser modern

🧠 Tips SEO untuk Loader

Meskipun loader adalah elemen visual, tetap perhatikan SEO:

  1. Gunakan teks alternatif loading seperti Preparing your content... agar pengguna tahu kontennya sedang diproses.

  2. Minimalkan waktu loading agar loader tidak terlihat terlalu lama.

  3. Gunakan aria dan role="status" untuk aksesibilitas (opsional):

    <div role="status" aria-live="polite">Preparing your content...</div>

📦 Contoh Lengkap Kode HTML + CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bouncing Dots Loader</title>
  <style>
    body {
      margin: 0;
      background: #f8f9fa;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .dots-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
    }
    .dot {
      width: 20px;
      height: 20px;
      margin: 0 10px;
      border-radius: 50%;
      animation: bounce 1.5s infinite ease-in-out;
    }
    .dot:nth-child(1) {
      background: #4285f4;
      animation-delay: 0s;
    }
    .dot:nth-child(2) {
      background: #ea4335;
      animation-delay: 0.2s;
    }
    .dot:nth-child(3) {
      background: #fbbc05;
      animation-delay: 0.4s;
    }
    .dot:nth-child(4) {
      background: #34a853;
      animation-delay: 0.6s;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-30px); }
    }
    .loading-message {
      text-align: center;
      margin-top: 30px;
      color: #333;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <div class="dots-container">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="loading-message" role="status" aria-live="polite">Preparing your content...</div>
  </div>
</body>
</html>

📌 Penutup

Loader animasi bouncing dots ini adalah cara elegan dan sederhana untuk meningkatkan UX (user experience) aplikasi web kamu. Dengan HTML dan CSS saja, kamu bisa membuat loading screen yang interaktif dan ringan. Jangan lupa untuk selalu memperhatikan aksesibilitas dan SEO dalam elemen loading!