Cara Membuat Loading Spinner CSS Simple & Responsif

Farhan Hidayat — Fri, 10 Apr 2026 12:20:26 +0000

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.

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.

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.




  
  Loading Spinner Premium
  



  
  
    
      
      Loading...
    
  

  
  
    Website Content
    Ini contoh halaman website kamu.

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.

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

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

Artikel Cara Membuat Loading Spinner CSS Simple & Responsif pertama kali tampil pada Farhanhidayat.com.

animasi loading css Arsip - Farhanhidayat.com