Generator Loader CSS

Cara kerja CSS yang dihasilkan

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Spinner adalah lingkaran yang digambar dengan border tebal. Aturan border-top-color mewarnai hanya bagian atas cincin dengan warna aksen, sehingga cincin terlihat seperti busur, dan aturan @keyframes spin memutarnya di sekitar pusatnya. Memutar dengan transform: rotate() menjaga animasi tetap ringan, karena browser menggerakkan elemen di compositor, bukan menggambar ulang bingkai demi bingkai.

Untuk menampilkannya di halaman, tambahkan satu elemen dan muat CSS-nya:

<div class="loader" role="status" aria-label="Memuat"></div>

Buat agar mudah diakses

• Tambahkan role="status" agar pembaca layar mengumumkan spinner.
• Setel aria-label dengan teks status, misalnya “Memuat”.
• Jangan sembunyikan konten di balik spinner lebih dari beberapa detik tanpa fallback timeout.
• Hormati prefers-reduced-motion. Ganti animasi berputar dengan efek pudar sederhana atau teks statis “Memuat…” untuk pengguna yang menonaktifkan animasi:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Kapan memakai spinner, kapan memakai UI optimistis

• Respons di bawah 100 ms: tidak perlu spinner; mata manusia hampir tidak merasakan jeda.
• 100 ms – 1 detik: spinner halus (lingkaran kecil, teks tombol “Memuat…”) mencegah klik ganda.
• 1 – 10 detik: spinner yang menonjol, idealnya dengan progres jika terukur.
• > 10 detik: ini bukan masalah spinner; cari tahu apa yang lambat dan perbaiki.

Untuk submit form dan klik tombol, spinner di dalam tombol biasanya lebih baik daripada overlay seluruh halaman.