Pembuat Spinner CSS Buat spinner loading CSS dan loader animasi dengan gaya yang dapat disesuaikan.

🎨

Pembuat Spinner CSS

Buat spinner loading CSS dan loader animasi dengan gaya yang dapat disesuaikan.

Pilih jenis spinner

Pilih dari gaya spinner border, dots, pulse, atau ring.

Sesuaikan tampilan

Atur warna, ukuran, lebar batas, dan kecepatan animasi.

Salin kode

Pratinjau spinner yang dianimasikan dan salin kode HTML dan CSS.

Loading tool...

What Is Pembuat Spinner CSS?

Generator Spinner CSS membuat indikator pemuatan animasi menggunakan CSS murni. Loading spinner menyediakan umpan balik visual bagi pengguna selama operasi asinkron seperti pengambilan data, unggahan file, atau transisi halaman. Alat ini menawarkan empat gaya spinner yang berbeda: border spinner (lingkaran klasik yang berputar), dots (titik-titik yang melompat), pulse (lingkaran yang membesar), dan ring (cincin yang berputar). Setiap gaya dapat disesuaikan sepenuhnya dengan kontrol untuk warna, ukuran, lebar border, dan kecepatan animasi. Kode yang dihasilkan termasuk markup HTML dan CSS dengan definisi animasi @keyframes. Semua spinner ringan, performant, dan tidak memerlukan JavaScript atau perpustakaan eksternal. Mereka bekerja di semua browser modern dan dapat diintegrasikan dengan mudah ke dalam proyek web apa pun.

Why Use Pembuat Spinner CSS?

Empat gaya spinner berbeda untuk konteks desain yang berbeda
Murni CSS tanpa ketergantungan JavaScript atau perpustakaan
Ukuran, warna, kecepatan, dan lebar batas dapat disesuaikan
Kode yang dihasilkan termasuk HTML dan CSS lengkap dengan keyframes

Common Use Cases

Keadaan Pemuatan Data

Tampilkan spinner saat mengambil data dari API atau database.

Umpan Balik Pengiriman Formulir

Tampilkan spinner pada tombol kirim selama proses pengiriman formulir.

Transisi Halaman

Gunakan spinner saat navigasi halaman atau perubahan rute di SPA.

Pemuatan Konten yang Diperlambat

Tampilkan indikator pemuatan saat gambar atau komponen dimuat.

Technical Guide

Spinner CSS menggunakan animasi @keyframes untuk membuat gerakan kontinu. Teknik border spinner menggunakan elemen lingkaran dengan border transparan pada sebagian besar sisi dan border berwarna pada satu sisi, kemudian memutarnya 360 derajat. Animasi dots menggunakan transformasi skala untuk menciptakan efek melompat dengan animasi-tunda yang tertunda. Animasi pulse menskala elemen dari 0 hingga 1 sambil memudarkan opasitas. Semua animasi menggunakan animasi: nama durasi fungsi-pengaturan kecepatan iterasi-hitung. Mengatur iterasi-hitung menjadi tak terhingga memastikan pengulangan kontinu. Fungsi-pengaturan-animasi (ease, linear, ease-in-out) mengontrol kurva kecepatan. Untuk aksesibilitas, tambahkan role="status" dan aria-label ke spinner. Pertimbangkan untuk menggunakan media query prefers-reduced-motion untuk menonaktifkan atau mengurangi animasi bagi pengguna yang lebih suka gerakan berkurang.

Tips & Best Practices

1
Gunakan animation-timing-function: linear untuk rotasi halus dan konstan
2
Tambahkan preferensi media query untuk aksesibilitas
3
Jaga ukuran spinner tetap sesuai-48px adalah standar, 24px untuk inline
4
Gunakan aria-label="Pemuatan" untuk aksesibilitas pembaca layar

Related Tools

Tempat Bermain CSS Transform

Eksperimen dengan transformasi CSS termasuk putar, skala, miring, dan terjemahkan dengan perspektif 3D.

🎨 CSS & Design

Pembuat Animasi CSS

Buat animasi keyframe CSS dengan efek preset dan waktu yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Transisi CSS

Buat transisi CSS dengan properti, durasi, easing, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Sandbox Tailwind CSS

Terapkan kelas utilitas Tailwind CSS ke elemen dengan pratinjau langsung dan output HTML.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah CSS spinners dapat diakses?

Tambahkan role="status" dan aria-label="Pemuatan" pada elemen spinner. Juga hormati preferensi prefers-reduced-motion.

Q Dapatkah saya mengubah arah rotasi?

Ya, ubah @keyframes dari rotate(360deg) menjadi rotate(-360deg) untuk rotasi berlawanan jarum jam.

Q Bagaimana cara memusatkan spinner di halaman?

Gunakan flexbox: display: flex; justify-content: center; align-items: center pada wadah induk.

Q Apakah CSS spinners akan berfungsi di browser lama?

Animasi CSS dan border-radius didukung di IE10+ dan semua browser modern.

Q Bagaimana cara mengubah kecepatan animasi?

Atur nilai durasi animasi. Nilai yang lebih rendah (0,5s) membuatnya lebih cepat, nilai yang lebih tinggi (2s) membuatnya lebih lambat.

About This Tool

Pembuat Spinner CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.