Apa itu Generator CSS Loader/Spinner?

Generator CSS Loader/Spinner adalah alat visual yang membantu Anda membuat animasi loading indah menggunakan CSS murni. Alih-alih menulis animasi keyframe kompleks dari awal, cukup jelajahi koleksi kami yang terdiri dari 43 preset buatan tangan, sesuaikan dengan desain Anda, dan salin kodenya.

Mengapa Menggunakan CSS Loader?

Indikator loading sangat penting untuk pengalaman pengguna. Mereka memberikan umpan balik visual selama pengambilan data, transisi halaman, atau operasi asinkron apa pun. Loader berbasis CSS menawarkan beberapa keuntungan:

Ringan

Tidak memerlukan JavaScript atau file gambar — animasi CSS murni membuat ukuran bundle Anda minimal.

Dapat Disesuaikan

Mudah mengubah warna, ukuran, dan kecepatan agar sesuai dengan identitas merek Anda dengan sempurna.

Berkinerja Tinggi

Animasi CSS yang dipercepat hardware berjalan lancar di semua perangkat tanpa mempengaruhi performa.

Dapat Diakses

Bekerja di semua browser modern dengan rendering konsisten dan tanpa masalah kompatibilitas.

Kategori Loader

Koleksi kami diorganisir ke dalam 7 kategori untuk membantu Anda menemukan loader yang sempurna untuk proyek Anda:

Spinner

Cincin dan busur berputar klasik 8 preset

Dots

Pola titik yang memantul, memudar, dan mengejar 8 preset

Bars

Animasi gelombang, equalizer, dan bilah geser 7 preset

Pulse

Lingkaran yang meluas, riak, dan efek detak jantung 6 preset

Progress

Bilah linear, bergaris, dan indikator tak tentu 6 preset

Shapes

Kubus 3D, bentuk yang berubah, dan animasi grid 8 preset

Cara Menggunakan

Jelajahi dan Pilih Loader

Gunakan tab kategori (Semua, Spinner, Dots, Bars, Pulse, Progress, Shapes) untuk memfilter loader berdasarkan jenis. Setiap thumbnail menampilkan pratinjau animasi langsung. Klik loader apa pun untuk memilihnya.

Tips cepat: Klik tombol Acak untuk menemukan loader baru dengan cepat dan dapatkan inspirasi.

Sesuaikan Loader Anda

Setelah memilih loader, gunakan kontrol di sebelah kanan untuk menyesuaikannya:

Warna — Klik color picker untuk memilih warna apa pun untuk loader Anda
Ukuran — Seret slider atau ketik nilai antara 20px dan 120px
Kecepatan — Sesuaikan durasi animasi dari 0.3s (cepat) hingga 3.0s (lambat)

Semua perubahan tercermin dalam pratinjau langsung secara instan.

Pratinjau di Latar Belakang Berbeda

Beralih antara latar belakang Terang, Gelap, dan Transparan untuk melihat tampilan loader Anda dalam konteks berbeda. Ini membantu memastikan loader Anda terlihat terlepas dari latar belakang halaman.

Salin Kode

Bagian output kode menyediakan dua tab:

HTML — Struktur markup untuk loader Anda
CSS — Gaya lengkap dengan nilai yang disesuaikan (warna, ukuran, kecepatan sudah diselesaikan)

Klik tombol Salin untuk menyalin kode tab aktif ke clipboard Anda. Tempel HTML ke halaman Anda dan tambahkan CSS ke stylesheet Anda.

Fitur

43 Preset Loader yang Dikurasi

Setiap loader dalam koleksi kami dirancang dengan cermat untuk daya tarik visual dan kesiapan produksi. Dari cincin berputar sederhana hingga animasi kubus 3D yang kompleks, ada loader untuk setiap kasus penggunaan.

Semua loader menggunakan CSS murni tanpa dependensi JavaScript.

Kustomisasi Real-Time

Sesuaikan setiap aspek loader Anda dengan kontrol intuitif. Perubahan pada warna, ukuran, dan kecepatan diterapkan secara instan dalam pratinjau langsung.

Tidak perlu membuat ulang atau menyegarkan — lihat perubahan Anda segera.

Toggle Pratinjau Latar Belakang

Pratinjau loader Anda di latar belakang terang, gelap, dan transparan untuk memastikan berfungsi baik dalam konteks apa pun.

Pola papan catur transparan membantu Anda memverifikasi bahwa loader Anda tidak memiliki artefak latar belakang yang tidak terduga.

Output Kode Siap Produksi

CSS yang dihasilkan berisi nilai yang sudah diselesaikan bukan variabel. Ini berarti Anda mendapatkan ukuran piksel yang tepat, warna spesifik, dan nilai waktu yang presisi.

Siap untuk ditempel langsung ke proyek Anda tanpa pengaturan tambahan apa pun.

HTML dan CSS Terpisah: Kode dibagi menjadi tab HTML dan CSS khusus, sehingga mudah menyalin setiap bagian ke tempat yang tepat di proyek Anda. HTML menyediakan markup minimal dan semantik sementara CSS menangani semua gaya visual dan animasi.

Pertanyaan yang Sering Diajukan

Apakah loader memerlukan JavaScript?

Tidak. Semua loader dibangun dengan animasi dan keyframe CSS murni. Anda hanya memerlukan markup HTML dan gaya CSS — tidak ada JavaScript yang diperlukan agar animasi berfungsi.

Bisakah saya mengubah warna loader setelah menyalin kode?

Ya. CSS yang dihasilkan menggunakan nilai warna eksplisit (misalnya #6366f1). Cukup temukan dan ganti nilai warna dalam CSS untuk mengubahnya.

Pro tip: Untuk tema yang lebih mudah, Anda dapat mengganti warna dengan properti kustom CSS seperti var(--loader-color).

Apakah loader responsif?

Loader menggunakan ukuran relatif berdasarkan nilai ukuran yang Anda tetapkan. Anda dapat menyesuaikan ukuran di generator atau memodifikasi nilai piksel dalam CSS agar sesuai dengan tata letak Anda. Menggunakan properti kustom CSS memudahkan pembuatan loader responsif.

Browser mana yang mendukung loader ini?

Semua loader bekerja di browser modern termasuk Chrome, Firefox, Safari, dan Edge. Mereka menggunakan fitur CSS standar seperti @keyframes, border-radius, dan transform yang didukung secara luas.

Bisakah saya menggunakan loader ini dalam proyek komersial?

Ya. Kode CSS yang dihasilkan bebas digunakan dalam proyek apa pun, termasuk yang komersial. Tidak ada atribusi yang diperlukan.

Bagaimana cara membuat loader muncul selama pemuatan halaman?

Tambahkan HTML loader ke halaman Anda dan tampilkan secara default. Ketika konten Anda selesai dimuat, gunakan JavaScript untuk menyembunyikan atau menghapus elemen loader.

Pendekatan umum adalah menambahkan kelas CSS yang memudarkan loader dengan transisi:

Contoh Implementasi

// Hide loader when page loads
window.addEventListener('load', function() {
    document.querySelector('.loader').classList.add('fade-out');
});