Pembuat Animasi Pemuatan CSS
Hasilkan spinner pemuatan yang mandiri menggunakan CSS+HTML — ring atau pulsing dots — dengan warna, ukuran, dan kecepatan khusus. CSS murni, tanpa GIF atau JS.
Input
Durasi satu siklus animasi penuh, dalam detik (0.2-5).
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-loading-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"loaderType": "ring",
"color": "#3498db",
"size": "40",
"speed": "1"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-loading-animation-generator` tool (CSS Loading Animation Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-loading-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Animasi Pemuatan CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukannya
Pembuat Animasi Pemuatan CSS membangun spinner pemuatan yang mandiri dan siap untuk disalin-tempel menggunakan hanya CSS @keyframes — tanpa GIF, tanpa gambar, tanpa pustaka animasi JavaScript. Pilih jenis loader, warna, ukuran, dan kecepatan, dan alat ini akan menampilkan markup HTML dan aturan CSS yang diperlukan untuk merender, pembaruan secara instan saat Anda menyesuaikan setiap kontrol.
Mengapa spinner CSS lebih baik dari GIF dan JS
Loader GIF animasi dan spinner yang didorong JavaScript adalah default lama, tetapi loader CSS murni hampir selalu pilihan yang lebih baik:
- Ukuran file — loader GIF biasanya beberapa kilobyte data gambar biner; loader CSS adalah beberapa ratus byte teks yang dikompres gzip lebih lanjut dan di-cache dengan stylesheet lainnya.
- Ketajaman pada ukuran atau DPI apa pun — GIF adalah gambar raster yang kabur atau piksel saat diskalakan atau dilihat di layar kepadatan tinggi. Loader CSS digambar dengan
border,backgrounddantransform, jadi tetap tajam pada ukuran apa pun. - Perubahan warna/ukuran instan — mengubah warna GIF berarti mengekspor ulang gambar; warna loader CSS adalah nilai tunggal yang dapat Anda terapkan tema, timpa, atau variasikan per komponen.
- Tidak ada JavaScript yang diperlukan — animasi berjalan sepenuhnya pada properti CSS
animationdan propertitransform/opacityyang dipercepat GPU, jadi tetap animasi lancar bahkan saat thread utama sibuk — tepat saat indikator pemuatan perlu bekerja.
Gunakan pustaka animasi yang didorong JS sebagai gantinya hanya jika Anda membutuhkan sesuatu yang loop @keyframes CSS murni tidak bisa mengekspresikan — gerakan berbasis fisika, animasi yang disinkronkan dengan kemajuan pemuatan nyata, atau pengurutan multi-tahap yang kompleks. Untuk indikator "sesuatu sedang dimuat" biasa, CSS lebih sederhana dan lebih ringan.
Jenis loader
- Ring Spinner — lingkaran yang dibangun dari
border, dengan tepi atas berwarna berbeda dari sisanya danborder-radius: 50%; animasi keyframerotatememutarnya secara terus-menerus. Ini adalah indikator pemuatan yang paling dikenal di web. - Pulsing Dots — tiga lingkaran kecil yang diskalakan dan memudar masuk secara berurutan, masing-masing dengan
animation-delayyang tersendat sehingga nadi muncul untuk bepergian di seluruh titik.
Cara menggunakannya
- Pilih Jenis Loader — Ring Spinner atau Pulsing Dots.
- Pilih Warna untuk loader.
- Sesuaikan Ukuran untuk sesuai dengan tempat loader akan duduk (tombol, kartu, overlay halaman penuh).
- Atur Kecepatan untuk mengontrol berapa banyak detik satu siklus animasi diperlukan — lebih rendah lebih cepat, lebih tinggi lebih lambat.
- Salin blok CSS ke stylesheet Anda dan cuplikan HTML ke markup Anda. Keduanya sepenuhnya mandiri; tidak ada yang lain yang diperlukan untuk animasi dijalankan.
FAQ
Apakah saya memerlukan perpustakaan atau skrip tambahan apa pun untuk ini bekerja?
Tidak. Semuanya berjalan pada aturan CSS @keyframes yang dikirim dalam output CSS — cukup sertakan CSS dan markup HTML, dan browser menangani sisanya.
Bisakah saya menggunakan kembali loader yang sama di berbagai tempat di halaman?
Ya — CSS menargetkan kelas .io-loader, jadi aturan yang sama berlaku di mana pun markup digunakan. Jika Anda memerlukan warna atau ukuran berbeda di tempat yang berbeda, hasilkan varian di sini dan ubah nama kelas (atau tambahkan kelas pengubah) sebelum menempelkannya.
Mengapa HTML menyertakan role="status" dan aria-label="Loading"?
Itu membuat loader dapat diakses oleh pembaca layar, yang sebaliknya tidak memiliki cara untuk mengetahui bahwa spinner murni visual mewakili status pemuatan.
Apakah alat ini menyimpan atau mengunggah apa pun? Tidak. Setiap nilai yang Anda masukkan — jenis loader, warna, ukuran dan kecepatan — diproses secara lokal di browser Anda untuk membangun cuplikan. Tidak ada yang dikirim ke server atau disimpan.