Generator Spinner CSS untuk Loader dan Animasi Loading
Generator spinner CSS ini mengubah 43 preset buatan tangan menjadi animasi loading yang siap disalin, jadi Anda tak perlu menulis keyframes dari nol. Telusuri galeri, atur warna, ukuran, dan kecepatan, lalu salin HTML dan CSS yang rapi untuk proyek Anda.
Dibuat untuk developer front-end dan desainer yang butuh indikator loading cepat tanpa dependensi — spinner, dots, bars, pulse, progress bar, atau bentuk beranimasi. Setiap preset murni CSS, jadi tidak ada JavaScript, tidak ada file gambar, dan tidak ada library yang perlu dipasang.
Cara Membuat Loader CSS
Telusuri dan pilih loader
Gunakan tab kategori — Semua, Spinner, Dots, Bars, Pulse, Progress, dan Shapes — untuk menyaring galeri. Setiap thumbnail beranimasi langsung, jadi klik yang Anda suka, atau tekan Acak untuk lompat ke pilihan baru.
Atur warna, ukuran, dan kecepatan
Buka pemilih warna untuk menetapkan warna loader apa pun, geser slider Ukuran antara 20px dan 120px, lalu atur Kecepatan (durasi animasi) dari 0,3d hingga 3,0d. Pratinjau langsung diperbarui seketika setiap kali ada perubahan.
Periksa di berbagai latar
Beralihkan pratinjau antara latar Terang, Gelap, dan Transparan. Tampilan transparan bermotif kotak-kotak membantu Anda memastikan loader duduk rapi di atas halaman tanpa sisa latar.
Salin HTML dan CSS
Beralih antara tab HTML dan CSS lalu klik Salin. CSS-nya sudah memuat warna, ukuran piksel, dan timing Anda secara persis, jadi tempel markup ke halaman dan gayanya ke stylesheet — selesai.
Fitur
43 Preset Loader Pilihan
Koleksi buatan tangan yang mencakup mulai dari ring berputar sederhana hingga kubus 3D beranimasi, masing-masing siap dipakai di produksi.
Enam Kategori Loader
Saring berdasarkan Spinner, Dots, Bars, Pulse, Progress, atau Shapes, atau lihat semuanya dalam satu galeri untuk menemukan gaya yang pas dengan cepat.
Galeri Beranimasi Langsung
Setiap thumbnail di grid menjalankan animasi aslinya, jadi Anda meninjau tiap loader dalam gerak sebelum memutuskan.
Pemilih Warna
Cocokkan dengan brand Anda dengan menetapkan warna apa pun untuk loader, diterapkan ke seluruh bagian animasi sekaligus.
Kontrol Ukuran dan Kecepatan
Skalakan loader dari 20px hingga 120px dan setel durasi animasi dari yang cepat 0,3d hingga yang lambat 3,0d.
Pratinjau Terang, Gelap, dan Transparan
Ganti latar pratinjau untuk memastikan loader Anda tetap terlihat dan rapi di konteks halaman apa pun.
Tab HTML dan CSS Terpisah
Kode dipisah menjadi markup minimal dan gaya, jadi Anda bisa menempel tiap bagian tepat di tempatnya.
Output Siap Pakai
CSS yang dihasilkan memakai nilai yang sudah dihitung — piksel, warna, dan timing yang persis — alih-alih variabel, siap ditempel tanpa pengaturan tambahan.
Salin Sekali Klik
Salin tab HTML atau CSS yang aktif langsung ke clipboard dengan satu tombol dan konfirmasi yang jelas.
Pemilih Loader Acak
Tekan Acak untuk seketika mendapat loader lain dalam kategori yang sedang Anda telusuri demi inspirasi cepat.
Murni CSS, Tanpa JavaScript
Setiap loader berjalan hanya dengan keyframes CSS — tanpa skrip dan tanpa gambar — sehingga tetap ringan dan cepat.
Tata Letak Responsif
Galeri, pratinjau, dan panel kode menyesuaikan layar Anda, jadi bekerja sama baiknya di desktop maupun ponsel.
Pertanyaan yang Sering Diajukan
Bagaimana cara membuat loading spinner dengan CSS?
Pilih preset dari galeri, sesuaikan warna, ukuran, dan kecepatannya sesuai selera, lalu salin tab HTML dan CSS ke proyek Anda. Animasi spinner langsung berjalan begitu Anda menempel markup ke halaman dan gayanya ke stylesheet.
Bisakah membuat spinner murni CSS tanpa JavaScript?
Bisa. Setiap loader di sini dibangun sepenuhnya dari animasi @keyframes CSS. Anda hanya butuh markup HTML dan gaya CSS — tidak perlu JavaScript dan tidak perlu file gambar agar animasinya berjalan.
Bagaimana mengubah warna dan kecepatan spinner?
Gunakan kontrol di generator: pemilih warna menetapkan warna loader, dan slider Kecepatan menetapkan durasi animasi dari 0,3d hingga 3,0d. Setelah disalin, Anda masih bisa mengubah nilainya langsung di CSS — cari warnanya (misalnya #6366f1) atau durasinya dalam detik lalu ubah langsung.
Bagaimana cara menengahkan spinner di halaman?
Bungkus loader dalam wadah setinggi penuh dan gunakan flexbox, misalnya display: flex; align-items: center; justify-content: center; dengan min-height diatur ke area yang ingin Anda isi. Untuk overlay layar penuh, posisikan wadah itu dengan position: fixed; inset: 0; agar spinner berada di tengah viewport.
Apa beda loader dan spinner?
"Loader" adalah istilah umum untuk indikator loading apa pun, sedangkan "spinner" adalah salah satu jenis yang umum — ring atau busur yang berputar. Alat ini mencakup keduanya: kategori Spinner berisi loader berputar klasik, dan kategori Dots, Bars, Pulse, Progress, serta Shapes memberi Anda gaya loading lain untuk tujuan yang sama.
Bisakah mengubah warna loader setelah kode disalin?
Bisa. CSS yang dihasilkan memakai nilai warna eksplisit, jadi Anda bisa mencari dan menggantinya di CSS kapan saja. Untuk theming yang lebih mudah, ganti warna itu dengan custom property CSS seperti var(--loader-color) dan kendalikan dari satu tempat.
Browser mana yang mendukung loader ini?
Semua loader bekerja di browser modern termasuk Chrome, Firefox, Safari, dan Edge. Loader mengandalkan fitur CSS yang didukung luas seperti @keyframes, border-radius, dan transform.
Apakah loader bebas dipakai untuk proyek komersial?
Ya. CSS yang Anda salin bebas dipakai di proyek apa pun, termasuk pekerjaan komersial, tanpa perlu atribusi.
Belum ada komentar. Jadilah yang pertama berkomentar!