Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Animasi Muat CSS

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Jenis Animasi

Jenis

Tampilan

Ukuran (px)

Ukuran keseluruhan loader dalam piksel.

Lebar Garis (px)

Digunakan oleh loader berbasis cincin (Cincin Berputar, Cincin Ganda, Lingkaran Berdetak).

Warna Utama

Lintasan / Warna Sekunder

Warna jalur untuk loader berbasis cincin; diabaikan oleh tipe hanya titik.

Animasi

Durasi (detik)

Panjang satu siklus animasi penuh, dalam detik.

Keluaran

Format

Label ARIA

Label yang dibacakan oleh pembaca layar.

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Animasi Muat CSS

Buat delapan animasi loading populer dalam CSS murni — cincin berputar, cincin ganda, titik berdetak, titik berayun, bola berayun, papan equalizer, lingkaran berdetak, dan indikator ketik. Sesuaikan warna, ukuran, lebar garis, dan durasi; lihat pratinjau langsung berubah; salin @keyframes + HTML minimal ke proyek Anda. Tidak ada JavaScript, tidak ada SVG, tidak ada ketergantungan eksternal.

Cara Penggunaan

Pilih jenis animasi dari dropdown.
Tetapkan ukuran loader dalam piksel dan sesuaikan lebar garis untuk jenis berbasis cincin.
Pilih warna utama dan warna jalur/sekunder.
Tetapkan durasi (dalam detik) untuk satu siklus penuh.
Pilih format output — HTML + CSS gabungan, hanya CSS, atau hanya HTML.
Opsional atur label ARIA khusus untuk pembaca layar.
Salin snipet yang dihasilkan atau unduh sebagai file.

Fitur

Delapan gaya animasi — mencakup pola loading paling umum dalam antarmuka UI modern.
Pratinjau langsung — setiap perubahan dirender ulang secara langsung sehingga Anda dapat memverifikasi waktu dan kehalusan sebelum menyalin.
Output murni CSS — tidak ada biaya runtime JavaScript dan tidak ada markup SVG yang harus dipertahankan.
Nama kelas yang terbatas — setiap snipet yang dihasilkan menggunakan prangkat unik sehingga beberapa loader dapat berada bersama tanpa saling menabrak.
Aksesibel secara default — setiap loader termasuk role="status" dan label ariabel yang dapat disesuaikan.
Tiga mode output — gabungan HTML + CSS, hanya CSS, atau hanya HTML, tergantung pada cara integrasinya.

 Tanya Jawab Umum

Apa fungsi @keyframes dalam CSS?

Aturan @keyframes menentukan langkah-langkah antara dalam animasi CSS. Setiap langkah (0%, 50%, 100%, dll.) menggambarkan gaya elemen yang harus dimiliki pada saat tersebut dalam siklus animasi. Browser menginterpolasi antara langkah-langkah tersebut untuk menghasilkan gerakan halus. Tanpa @keyframes, properti animasi tidak memiliki apa-apa untuk diputar.
Mengapa menggunakan animasi CSS daripada SVG atau JavaScript untuk loader?

Animasi CSS berjalan di thread kompositor browser, yang berarti mereka tetap halus bahkan ketika thread JavaScript utama sedang sibuk. Mereka tidak memiliki ketergantungan skrip, tidak memiliki beban tambahan, dan mereka mengalami degradasi secara lancar pada perangkat lama. Loader SVG dan JavaScript dapat melakukan hal-hal yang lebih kompleks, tetapi untuk spinner sederhana atau titik berayun, CSS adalah opsi paling ringan dan paling andal.
Apa fungsi timing fungsi cubic-bezier?

Fungsi timing cubic-bezier menggambarkan bagaimana animasi mempercepat dan melambat seiring waktu menggunakan empat titik kendali pada kurva. Dibandingkan dengan kata kunci seperti linear atau ease-in-out, cubic-bezier memungkinkan Anda menyesuaikan kesan gerakan — misalnya, bola berayun menggunakan cubic-bezier(0.5, 0.05, 0.5, 0.95) untuk meniru gravitasi.
Mengapa animasi loading perlu role dan aria-label?

Pembaca layar tidak dapat melihat lingkaran berputar, sehingga mereka membutuhkan petunjuk programatis bahwa sesuatu sedang terjadi. role="status" memberi tahu teknologi bantuan bahwa elemen ini menyampaikan pembaruan status langsung, dan aria-label menyediakan teks yang dapat dibaca oleh manusia yang akan diumumkan. Tanpa atribut ini, loader tidak terlihat bagi pengguna yang tidak melihat.