Generator Loader CSS

Apa Itu Alat Ini?

Loader CSS adalah elemen animasi kecil — cincin berputar, titik yang memantul, lingkaran yang berdenyut, atau bilah kemajuan yang bergerak — digunakan untuk menunjukkan bahwa konten sedang dimuat, tanpa loop animasi JavaScript dan tanpa gambar atau GIF. Loader dibangun dari beberapa aturan CSS ditambah blok @keyframes yang mendefinisikan bagaimana elemen bergerak seiring waktu.

Alat ini menghasilkan empat pola loader umum dengan CSS nyata dan berfungsi: spinner berputar berbasis border, tiga titik yang memantul secara berurutan, lingkaran yang berdenyut masuk dan keluar, serta bilah dengan isian yang bergeser. Sesuaikan ukuran, warna, dan durasi pada pratinjau langsung, lalu salin CSS yang dihasilkan beserta elemen HTML minimal tempatnya diterapkan.

Sumber: CSS Animations Level 1, W3C — spesifikasi yang mendefinisikan @keyframes dan properti animasi yang menjadi dasar loader ini.

Mengapa Menggunakannya?

• Pratinjau langsung beranimasi secara real-time saat Anda mengubah gaya, ukuran, warna, atau kecepatan — Anda melihat persis apa yang akan digunakan.
• Menghasilkan CSS lengkap termasuk blok @keyframes, bukan hanya potongan yang harus Anda selesaikan sendiri.
• Juga menghasilkan markup HTML persis yang diharapkan CSS, jadi tidak perlu menebak nama kelas atau struktur elemen.
• Empat pola animasi berbeda (spinner, titik, denyut, bilah) mencakup kasus penggunaan status loading yang paling umum.
• Animasi CSS murni — tanpa JavaScript, tanpa aset gambar, lebih ringan dan lebih halus daripada GIF animasi.
• Berjalan sepenuhnya di browser Anda, gratis, tanpa pendaftaran.

Cara Menggunakan

1. Pilih gaya loader: cincin berputar, titik memantul, lingkaran berdenyut, atau bilah kemajuan.
2. Geser penggeser ukuran untuk memperbesar atau memperkecil loader.
3. Pilih warna — ini menjadi warna aksen loader (border yang berputar, titik-titik, atau isian bilah).
4. Sesuaikan kecepatan untuk membuat animasi lebih cepat atau lebih lambat; kebanyakan loader UI terlihat paling baik antara 0,6 detik dan 1,5 detik per siklus.
5. Salin CSS yang dihasilkan ke stylesheet Anda dan tempel potongan HTML di mana pun loader perlu muncul.

Contoh

Input

Gaya: cincin berputar · Ukuran: 40px · Warna: oranye · Kecepatan: 1,0d

Output

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

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

Spinner cincin klasik: sebuah lingkaran dengan border hampir transparan pada tiga sisi dan warna solid pada sisi keempat, berputar terus-menerus dengan animasi linear tak terbatas.

Mengapa loader CSS dibanding GIF animasi

Spinner GIF animasi menjadi pilihan default selama bertahun-tahun, tapi loader CSS saat ini hampir selalu pilihan yang lebih baik: hanya beberapa ratus byte teks dibanding file gambar biner, dapat diskalakan ke ukuran berapa pun tanpa pecah karena digambar dengan border dan transform, dan warnanya bisa diubah seketika dengan satu nilai CSS alih-alih mengekspor ulang gambar baru.

Keempat gaya di sini — spinner, titik, denyut, bilah — juga yang paling sering muncul di antarmuka nyata, mulai dari status loading tombol hingga overlay seluruh halaman. Masing-masing hanya mengubah transform dan opacity dalam keyframes-nya, yang dapat dianimasikan browser dengan mulus di GPU tanpa membuat sisa halaman tersendat.

Memilih gaya sesuai situasi

• Cincin berputar: pilihan paling netral dan serbaguna — cocok di dalam tombol dan status loading inline kecil.
• Titik memantul: terasa lebih ringan dan playful; umum untuk indikator 'sedang mengetik...' pada chat dan waktu tunggu singkat.
• Lingkaran berdenyut: bagus sebagai indikator loading satu elemen atau sebagai titik status 'aktif/live'.
• Bilah kemajuan: menyiratkan gerakan maju dan sering diharapkan untuk pemuatan halaman atau proses multi-langkah, bahkan tanpa persentase pasti.

Menggunakan loader di proyek Anda

Tempel CSS yang dihasilkan sekali ke stylesheet Anda, lalu gunakan kembali potongan HTML di mana pun Anda membutuhkan status loading — di dalam tombol saat formulir dikirim, di atas kartu saat data diambil, atau di tengah overlay seluruh halaman. Karena animasinya CSS murni, mengaktifkan atau menonaktifkannya semudah menambah atau menghapus elemen dari DOM, atau menyembunyikannya dengan display: none.

→ Generator Box Shadow · Minifier CSS

Pertanyaan yang Sering Diajukan