Lompat ke konten
Aback Tools Logo

Generator Loader / Spinner

Buat animasi pemuatan CSS dengan generator spinner gratis kami. Pilih dari 16 gaya - Spinner Klasik, Cincin Ganda, Titik Memantul, Bar, Pulsa, Detak Jantung, dan lainnya - dikelompokkan berdasarkan kategori. Sesuaikan warna, ukuran (12px hingga 120px), kecepatan animasi, dan ketebalan spinner dengan kontrol interaktif dan pratinjau langsung. Salin kode HTML + CSS lengkap dengan satu klik untuk integrasi instan ke proyek Anda. Sepenuhnya privat, 100% gratis, dan tanpa pendaftaran.

Loader / Spinner Generator
Choose from 16 CSS loading spinner styles, customise colours, size, and speed, and copy the ready-to-use HTML + CSS code with one click.
40px
40px
1s
1s
4px

Rotating border spinner

<!-- HTML -->
<div class="aback-spinner aback-spinner--spinner"></div>

<!-- CSS -->
<style>
@keyframes spinner-rotate { 100% { transform: rotate(360deg); } }

.aback-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aback-spinner--spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #6366F120;
  border-top-color: #6366F1;
  border-radius: 50%;
  animation: spinner-rotate 1.00s linear infinite;
}
</style>

Mengapa Menggunakan Generator Loader / Spinner Kami?

  • 16 gaya spinner: Generator spinner mencakup 16 animasi pemuatan CSS berbeda: Spinner Klasik, Cincin Ganda, Cincin, Rol, Lingkaran, Eclipse, Titik Memantul, Ellipsis, Riak, Bar, Pulsa, Bilah Progres, Detak Jantung, Jam Pasir, Putaran Persegi, dan Titik Default. Filter berdasarkan kategori (melingkar, titik, bar, lain-lain) untuk menemukan loader yang sempurna dengan cepat.
  • Kustomisasi penuh: Sesuaikan setiap aspek spinner Anda - warna melalui pemilih warna atau input HEX, ukuran dari 12px hingga 120px, kecepatan dari 0,2s hingga 3s, dan ketebalan untuk spinner melingkar. Tombol bawaan untuk ukuran dan kecepatan umum memudahkan penyesuaian cepat.
  • 100% privat - tanpa unggah: Seluruh pembuatan kode spinner terjadi secara lokal di browser Anda. Warna dan pengaturan Anda tidak pernah keluar dari perangkat dan tidak pernah dikirim ke server mana pun - aman untuk desain proprietary.
  • Gratis & tanpa batas: Buat variasi spinner tanpa batas tanpa pendaftaran, tanpa langganan, dan tanpa batas penggunaan. Generator spinner ini sepenuhnya gratis selamanya tanpa iklan yang mengganggu antarmuka.

Kasus penggunaan umum generator loader / spinner

  • Pengembangan web: Pengembang frontend menggunakan generator spinner untuk membuat indikator pemuatan untuk panggilan AJAX, transisi halaman, dan status pemuatan konten. Salin HTML dan CSS langsung ke komponen React, Vue, atau Angular untuk integrasi instan.
  • Layar pemuatan aplikasi: Pengembang SPA menggunakan generator untuk layar pembuka dan status pemuatan awal. Animasi CSS murni ringan dan berkinerja baik, memastikan render awal cepat tanpa dependensi JavaScript.
  • Desain seluler & responsif: Pengembang seluler menggunakan generator untuk membuat indikator pemuatan berukuran sesuai untuk tata letak seluler. Pendekatan hanya-CSS memastikan rendering konsisten di seluruh perangkat tanpa permintaan jaringan ekstra.
  • Unggah berkas & pengiriman formulir: Desainer dan pengembang menggunakan generator untuk memberikan umpan balik visual selama unggahan berkas, pengiriman formulir, dan operasi asinkron. Gaya bilah progres dan pulsa sangat cocok untuk status progres unggahan.
  • API & pengambilan data: Pengembang yang membangun aplikasi padat data menggunakan generator untuk status pemuatan saat mengambil dari REST API, endpoint GraphQL, atau data streaming. Padukan spinner dengan skeleton screen untuk UX yang apik.
  • Komponen design system: Pengelola design system menggunakan generator spinner untuk mendefinisikan token pemuatan yang terstandarisasi. Warna, ukuran, dan kecepatan spinner yang konsisten memastikan pengalaman pemuatan yang seragam di semua komponen sistem.

Apa itu spinner pemuatan CSS?

Spinner pemuatan CSS (juga disebut loader atau indikator pemuatan) adalah animasi visual yang memberi tahu pengguna bahwa konten sedang dimuat atau diproses. Spinner CSS murni menggunakan animasi @keyframes dan properti CSS seperti transform, opacity, dan border untuk menciptakan efek pemuatan animasi tanpa JavaScript. Generator kami membuat 16 gaya spinner berbeda, masing-masing dengan warna, ukuran, dan kecepatan yang dapat disesuaikan.

Cara kerja generator spinner kami

  1. Pilih gaya spinner: Telusuri 16 gaya spinner yang dikelompokkan berdasarkan kategori (Melingkar, Titik, Bar, Lain-lain). Klik gaya apa pun untuk melihat pratinjau seketika. Setiap gaya menghasilkan animasi keyframe CSS unik untuk efek visual spesifiknya.
  2. Sesuaikan warna dan ukuran: Gunakan pemilih warna atau input HEX untuk mengatur warna spinner. Atur ukuran (12px hingga 120px) dan kecepatan animasi (0,2s hingga 3s) dengan slider atau tombol bawaan. Untuk spinner melingkar, atur juga ketebalan border.
  3. Salin kodenya: Klik “Salin Kode” untuk menyalin blok kode HTML + CSS lengkap. Output mencakup struktur elemen HTML dan semua keyframe serta gaya kelas CSS yang diperlukan agar animasi berfungsi.

Praktik terbaik untuk indikator pemuatan

  • Gunakan ukuran yang sesuai: 16-24px untuk spinner di dalam tombol, 32-48px untuk loader area konten, dan 64-96px untuk layar pemuatan halaman penuh.
  • Cocokkan dengan warna merek: Gunakan warna merek Anda untuk spinner agar konsistensi visual terjaga. Generator kami memungkinkan Anda menyetel warna HEX apa pun sesuai design system Anda.
  • Pertimbangkan kecepatan: Kecepatan lebih cepat (0,5-0,75s) terasa lebih responsif untuk pemuatan singkat. Kecepatan lebih lambat (1,5-2s) kurang mengganggu untuk status pemuatan yang lama. Jadikan 1s default untuk sebagian besar kasus.
  • Padukan dengan skeleton screen: Untuk halaman yang padat konten, gabungkan spinner dengan status pemuatan skeleton untuk memberi pengguna rasa kemajuan dan mengurangi waktu tunggu yang dirasakan.

Pertanyaan yang Sering Diajukan

Generator spinner membuat animasi pemuatan CSS dengan gaya, warna, ukuran, dan kecepatan yang dapat disesuaikan. Alat kami mencakup 16 jenis spinner berbeda yang dikelompokkan ke dalam kategori - melingkar, titik, bar, dan lain-lain. Setiap spinner menghasilkan kode CSS murni menggunakan animasi @keyframes.

Telusuri gaya spinner berdasarkan kategori, klik salah satu untuk melihat pratinjaunya, lalu sesuaikan warna, ukuran, kecepatan, dan ketebalan. Pratinjau diperbarui seketika. Jika sudah puas, klik “Salin Kode” untuk menyalin blok kode HTML + CSS lengkap.

Tidak. Semua 16 gaya spinner adalah CSS murni menggunakan animasi @keyframes. Tidak diperlukan JavaScript untuk kinerja lebih baik dan tanpa dependensi eksternal.

Animasi CSS @keyframes didukung di Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, dan Opera 30+. Properti CSS yang digunakan memiliki dukungan lintas browser yang sangat baik.

Ya. Seluruh pembuatan kode spinner terjadi 100% di sisi klien di browser Anda. Warna dan pengaturan Anda tidak pernah dikirim ke server mana pun.

Kecil (16-24px) untuk tombol, sedang (32-48px) untuk area konten, besar (64-96px) untuk loader halaman penuh. Generator ini menyertakan tombol ukuran bawaan untuk ukuran umum.

Ya. Gunakan pemilih warna untuk memilih warna apa pun secara visual, atau ketik nilai HEX langsung. Semua 16 gaya spinner menggunakan warna yang dikonfigurasi.

Ya. Generator spinner ini 100% gratis tanpa pendaftaran, tanpa fitur premium, dan tanpa batas penggunaan.