Home Coding Cara Membuat Loading Spinner CSS Simple & Responsif

Cara Membuat Loading Spinner CSS Simple & Responsif

Farhan Hidayat 10 April 2026 5 min read

Saat membuka website, pernah nggak kamu merasa bingung karena halaman lama banget loading tanpa tanda apa pun? Nah, di sinilah peran loading spinner jadi penting. Melalui artikel ini, kamu akan belajar cara membuat loading spinner CSS yang simple, ringan, dan tetap responsif tanpa ribet.

Apa Itu Loading Spinner CSS dan Fungsinya?

Loading spinner CSS adalah animasi sederhana yang biasanya muncul saat website sedang memproses data. Dengan adanya spinner, user jadi tahu kalau sistem masih berjalan.

Selain itu, spinner juga membantu meningkatkan user experience. Jadi, meskipun loading agak lama, pengunjung tetap merasa “ditemani” dan tidak bingung.

Kenapa Harus Menggunakan Loading Spinner di Website?

Tanpa loading spinner, website sering terasa seperti “hang” atau error. Akibatnya, user bisa langsung menutup halaman.

Also Read: Micro Interaction CSS: 10 Efek UI agar Website Lebih Interaktif

Sebaliknya, dengan spinner:

User mendapat feedback visual
Tampilan terlihat lebih profesional
Website terasa lebih responsif

Oleh karena itu, penggunaan loading spinner CSS sangat disarankan, terutama untuk website modern.

Persiapan Sebelum Membuat Loading Spinner CSS

Sebelum mulai, pastikan kamu sudah memahami dasar HTML dan CSS. Tenang, kamu tidak perlu skill advanced.

Also Read: Panduan Membuat Navbar Transparan ke Solid Saat Scroll

Selain itu, siapkan:

File HTML sederhana
File CSS
Editor kode (seperti VS Code)

Kemudian, pahami juga konsep dasar animasi CSS seperti @keyframes. Ini penting karena akan digunakan untuk membuat efek berputar.

Cara Membuat Loading Spinner CSS Simple (Step by Step)

1. Membuat Struktur HTML

Pertama, buat elemen dasar untuk spinner.

Also Read: 5 Contoh Animasi Cursor Custom untuk UI Website Interaktif

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Loading Spinner Premium</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Overlay Loading -->
  <div class="loading-overlay" id="loading">
    <div class="spinner-container">
      <div class="spinner"></div>
      <p class="loading-text">Loading...</p>
    </div>
  </div>

  <!-- Konten Website -->
  <div class="content">
    <h1>Website Content</h1>
    <p>Ini contoh halaman website kamu.</p>
  </div>

  <script>
    // Simulasi loading (hapus di production kalau pakai API asli)
    window.addEventListener("load", () => {
      setTimeout(() => {
        document.getElementById("loading").classList.add("hide");
      }, 1500);
    });
  </script>

</body>
</html>

Struktur ini sederhana, tetapi cukup untuk membuat animasi.

2. Menambahkan Styling CSS

Selanjutnya, tambahkan style agar berbentuk lingkaran.

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY */
body {
  font-family: 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #fff;
}

/* OVERLAY */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s;
}

/* HIDE EFFECT */
.loading-overlay.hide {
  opacity: 0;
  visibility: hidden;
}

/* CONTAINER */
.spinner-container {
  text-align: center;
}

/* SPINNER PREMIUM */
.spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1.2s linear infinite;
}

/* EFFECT RING */
.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
}

/* GRADIENT SPIN */
.spinner::before {
  border-top-color: #38bdf8;
  border-right-color: #6366f1;
}

/* BLUR GLOW */
.spinner::after {
  border-top-color: #38bdf8;
  filter: blur(6px);
  opacity: 0.6;
}

Di sini, kita memanfaatkan border untuk menciptakan efek visual spinner.

Also Read: Cara Membuat Parallax Scrolling Effect dengan Mudah

3. Menambahkan Animasi CSS

Agar spinner bisa berputar, tambahkan animasi berikut:

/* ANIMATION */
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* TEXT */
.loading-text {
  margin-top: 16px;
  font-size: 14px;
  color: #cbd5f5;
  letter-spacing: 1px;
  animation: fade 1.5s ease-in-out infinite;
}

/* TEXT ANIMATION */
@keyframes fade {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* CONTENT */
.content {
  padding: 40px;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .spinner {
    width: 45px;
    height: 45px;
  }

  .loading-text {
    font-size: 12px;
  }
}

Dengan begitu, elemen akan terus berputar secara halus.

4. Hasil Akhir Loading Spinner

Also Read: 7 Skeleton Screen yang Membuat Website Terasa Lebih Cepat

Sekarang, spinner sudah bisa digunakan. Meskipun sederhana, tampilannya sudah cukup modern dan ringan.

Cara Membuat Loading Spinner CSS Responsif

Agar spinner tetap terlihat bagus di semua perangkat, kamu perlu membuatnya responsif.

Gunakan Unit Fleksibel

Gunakan em, rem, atau % agar ukuran menyesuaikan layar.

Sesuaikan di Mobile

Selain itu, pastikan ukuran tidak terlalu besar di HP. Kamu bisa menambahkan media query jika diperlukan.

Contoh Variasi Loading Spinner CSS

Supaya tidak monoton, kamu bisa mencoba beberapa variasi:

Spinner dengan warna berbeda
Spinner dengan efek lebih smooth
Spinner minimalis untuk UI modern

Dengan sedikit kreativitas, tampilan bisa jadi jauh lebih menarik.

Kesalahan yang Sering Terjadi Saat Membuat Spinner

Meskipun terlihat mudah, ada beberapa kesalahan yang sering terjadi:

Animasi terlalu cepat atau terlalu lambat
Ukuran tidak responsif
Terlalu banyak efek sehingga berat
Tidak diuji di berbagai device

Karena itu, penting untuk selalu melakukan testing.

Tips Biar Loading Spinner Lebih Maksimal

Agar hasilnya lebih optimal, kamu bisa menerapkan beberapa tips berikut:

Gunakan animasi yang smooth
Sesuaikan warna dengan branding website
Hindari efek berlebihan
Gunakan durasi animasi yang nyaman dilihat

Dengan begitu, spinner tidak hanya berfungsi, tetapi juga enak dilihat.

Kapan Sebaiknya Menggunakan Loading Spinner?

Loading spinner sebaiknya digunakan saat:

Mengambil data dari API
Loading halaman tertentu
Proses upload file

Namun, jangan digunakan secara berlebihan agar tidak mengganggu user.

Kesimpulan

Pada akhirnya, cara membuat loading spinner CSS ternyata cukup sederhana dan bisa langsung kamu terapkan. Dengan kombinasi HTML dan CSS, kamu sudah bisa membuat animasi yang ringan, responsif, dan meningkatkan pengalaman pengguna.

Jadi, sekarang giliran kamu untuk mencoba dan mengembangkan versi spinner yang lebih menarik sesuai kebutuhan website kamu.

Kalau kamu ingin mengembangkan animasi loading CSS lebih lanjut, kamu bisa pelajari dokumentasi resmi CSS animation di:

Jasa Artikel SEO Friendly & Tema WordPress Premium hanya di:

ArtikelPro

Tagged with: