Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Penyusun Spinner SVG

PengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Jenis Spinner

Jenis

Tampilan

Ukuran (px)

Lebar Garis (px)

Digunakan oleh spinner berbasis garis (Lingkaran Garis, Dua Cincin, Pengisi Batang, Ripple).

Warna Utama

Lintasan / Warna Sekunder

Warna lintasan (Lingkaran Garis, Dua Cincin, Pengisi Batang) atau warna titik/arc kedua.

Animasi

Kecepatan (detik)

Durasi satu siklus animasi penuh, dalam detik.

Keluaran

Format

Label ARIA

Label yang dibacakan oleh pembaca layar.

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Penyusun Spinner SVG

Buat spinner SVG yang animasi tajam secara langsung di browser dan salin kode siap digunakan untuk proyek Anda. Pilih dari tujuh gaya spinner populer, sesuaikan ukuran, lebar garis, warna, dan kecepatan animasi, lalu lihat pratinjau langsung yang diperbarui secara instan. Ekspor sebagai SVG inline terintegrasi, potongan HTML + CSS, atau komponen React (JSX).

Cara Penggunaan

Pilih sebuah jenis spinner — Lingkaran Garis, Dua Cincin, Cincin Titik, Titik Gema, Titik Berayun, Pengisi Batang, atau Ripple.
Atur ukuran, lebar garis, warna utamadan lintasan / warna sekunder untuk sesuai dengan merek Anda.
Tetapkan kecepatan animasi (dalam detik) untuk mengontrol seberapa cepat loader berputar.
Pilih sebuah format keluaran: SVG inline (satu file, bisa ditempatkan di mana saja), HTML + CSS (blok gaya terpisah), atau Komponen React (JSX).
Salin kode yang dihasilkan dari panel keluaran atau unduh sebagai file.

Fitur

Tujuh gaya spinner — Lingkaran Garis, Dua Cincin, Cincin Titik, Titik Gema, Titik Berayun, Pengisi Batang, Ripple.
Pratinjau animasi langsung di latar belakang kotak untuk memungkinkan Anda menilai pilihan warna secara langsung.
SVG inline terintegrasi — animasi CSS terintegrasi di dalam SVG, sehingga bekerja tanpa gaya eksternal.
HTML + CSS ekspor dengan blok gaya terpisah ketika Anda lebih memilih untuk memisahkan markup dan gaya.
Komponen React (JSX) ekspor siap dipasang ke proyek Next.js, Vite, atau Create React App.
Ukuran, lebar garis, warna, dan kecepatan yang dapat disesuaikan dengan nilai default yang masuk akal dan validasi.
Aksesibilitas terintegrasi — setiap spinner dilengkapi dengan role="status" dan konfigurasi aria-label sehingga pembaca layar mengumumkan status loading.
Nama kelas yang terbatas per potongan, sehingga spinner yang berbeda di halaman yang sama tidak saling tumpang tindih.

Kapan Menggunakan Setiap Spinner

Lingkaran Garis / Dua Cincin — menunggu yang tidak mengetahui kemajuan (panggilan API, transisi halaman).
Cincin Titik — indikator klasik "berpikir" yang cocok dengan UI yang halus.
Titik Gema / Titik Berayun — konteks yang ramah, konversasional seperti indikator ketik di chat.
Pengisi Batang — upload file, download, atau di mana saja Anda butuh indikator yang luas dan rendah profil.
Ripple — umpan balik lembut dan ambient seperti saat sebelum konten muncul.

 Tanya Jawab Umum

Mengapa menggunakan SVG untuk spinner loading daripada GIF animasi?

SVG adalah format vektor, sehingga spinner tetap tajam pada ukuran apa pun dan di semua kepadatan piksel. Ukuran file sangat kecil (sering hanya beberapa ratus byte), warna dapat diubah melalui CSS secara dinamis, dan animasi dapat dihentikan, diresumikan, atau diubah tanpa merekodikan ulang aset. Sebaliknya, GIF adalah format raster, lebih besar, kehilangan detail di tepi, dan terikat pada warna dan kecepatan yang dibuat saat file diexport.
Perbedaan antara indikator loading determinatif dan indeterminate?

Indikator determinatif menunjukkan kemajuan nyata menuju total yang diketahui, seperti bar progress yang terisi dari 0% ke 100%. Indikator indeterminate hanya memberi tahu pengguna bahwa pekerjaan sedang berlangsung ketika durasi atau kemajuan tidak dapat diukur — misalnya, saat menunggu respons jaringan. Sebagian besar spinner (lingkaran berputar, titik bergetar, ripple) adalah indeterminate; loader batang bisa keduanya, tergantung pada apakah mereka menunjukkan potongan bergerak atau bagian terisi.
Kapan spinner loading harus muncul?

Sebagai panduan kegunaan umum, jangan tampilkan indikator untuk tindakan yang selesai dalam kurang dari sekitar 100 ms — tampilan UI terasa instan. Antara sekitar 100 ms hingga 1 detik, indikator kecil yang ditempatkan dekat kontrol yang terpengaruh sudah cukup. Setelah 1 detik, gunakan spinner yang jelas. Untuk tunggu lebih dari sekitar 10 detik, gunakan indikator kemajuan determinatif dengan pesan yang bermakna, karena pengguna mulai kehilangan kepercayaan bahwa sistem masih bekerja.
Bagaimana animasi CSS bekerja di dalam SVG?

Animasi CSS menargetkan elemen SVG dengan cara yang sama seperti menargetkan elemen HTML: Anda menulis aturan keyframes dan menerapkannya melalui properti animation pada kelas. Target umum meliputi transformasi rotasi untuk putaran, opacity untuk efek perlahan, dan stroke-dashoffset untuk efek penggambaran pada lingkaran dan garis. Untuk membuat rotasi berpusat di titik visual tengah bentuk, atur transform-origin ke titik tersebut. Animasi yang dideklarasikan di dalam elemen style di dalam SVG itu sendiri tetap terbatas pada dokumen tersebut, yang merupakan alasan mengapa SVG terintegrasi bekerja saat ditempatkan di mana saja di halaman.
Bagaimana membuat spinner loading dapat diakses oleh pembaca layar?

Tandai elemen spinner dengan role=status (atau role=progressbar untuk kemajuan determinatif) agar teknologi bantuan menganggap perubahan sebagai wilayah hidup. Sediakan label singkat dan bermakna seperti "Memuat" atau "Menyimpan" agar tujuan diumumkan, dan hindari mengandalkan warna saja untuk menyampaikan status. Untuk kemajuan determinatif, juga atur aria-valuenow, aria-valuemin, dan aria-valuemax agar persentase diumumkan saat diperbarui.