Penghasil Loader CSS
CSS Loader Generator membuat animasi loading pure CSS dalam enam gaya — spinner, bouncing dots, ring, pulse, bars, dan dual ring — dengan ukuran, warna, kecepatan, dan ketebalan yang bisa diatur, serta menghasilkan CSS dan HTML sekaligus.
Tentang alat ini
CSS Loader Generator membuat animasi loading pure CSS dalam enam gaya — spinner, bouncing dots, ring, pulse, bars, dan dual ring — dengan ukuran, warna, kecepatan, dan ketebalan yang bisa diatur, serta menghasilkan CSS dan HTML sekaligus.
Cara menggunakan
- Pilih gaya loader.
- Atur ukuran, warna, kecepatan, dan ketebalan.
- Periksa pratinjau langsung.
- Klik Copy CSS + HTML lalu tempel keduanya ke halaman Anda.
Perlu diketahui
- Loader pure CSS tidak memerlukan gambar, GIF, atau JavaScript.
- Spinner berputar dengan @keyframes dan transform: rotate(), yang efisien untuk dianimasikan.
- Markup-nya hanya satu elemen, atau beberapa elemen anak untuk dots dan bars.
- Tambahkan role="status" dan label tersembunyi secara visual seperti “Loading…” agar screen reader mengumumkan loader tersebut.
- Pertimbangkan untuk memperlambat atau menghentikan loader saat prefers-reduced-motion aktif.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara membuat spinner loading dengan CSS?
Beri elemen persegi border dengan satu sisi berwarna, border-radius: 50%, dan animasi @keyframes yang berputar — atau salin saja dari generator ini.
Apakah loader CSS lebih baik daripada GIF?
Biasanya ya: ukurannya lebih kecil, tetap tajam di ukuran apa pun, dan warna serta kecepatannya bisa diubah lewat CSS.
Bagaimana membuat loader yang aksesibel?
Bungkus dengan elemen ber-role="status" dan sertakan teks tersembunyi seperti “Loading…” agar teknologi bantu dapat mengumumkannya.
Bagaimana cara menempatkan loader di tengah halaman?
Letakkan di dalam container dengan display: flex; justify-content: center; align-items: center;.