Penjana CSS Loader

Pilih gaya loader, laraskan saiz, warna dan kelajuan animasi, dan alat ini menjana CSS penuh — termasuk peraturan @keyframes — bersama markup HTML yang sepadan, supaya anda boleh salin animasi loading yang berfungsi tanpa menulis sebarang kod animasi secara manual.

Apakah alat ini?

CSS loader ialah elemen kecil beranimasi — cincin berputar, titik melantun, bulatan berdenyut, atau bar kemajuan bergerak — digunakan untuk menunjukkan kandungan sedang dimuatkan, tanpa gelung animasi JavaScript dan tanpa imej atau GIF diperlukan. Ia dibina daripada beberapa peraturan CSS ditambah blok @keyframes yang mentakrifkan bagaimana elemen bergerak dari masa ke masa.

Alat ini menjana empat corak loader biasa dengan CSS sebenar yang berfungsi: spinner berasaskan sempadan yang berputar, tiga titik yang melantun berturutan, bulatan yang berdenyut keluar masuk, dan bar dengan isian yang meluncur. Laraskan saiz, warna dan tempoh animasi pada pratonton langsung, kemudian salin CSS yang dijana dan HTML minimum yang ia gunakan.

Sumber: CSS Animations Level 1, W3C — spesifikasi yang mentakrifkan @keyframes dan sifat animation yang menjadi asas loader ini.

Kenapa guna alat ini?

Pratonton langsung beranimasi secara masa nyata apabila anda ubah gaya, saiz, warna atau kelajuan — lihat tepat apa yang akan anda gunakan.
Menjana CSS lengkap termasuk blok @keyframes, bukan sekadar cebisan yang anda perlu siapkan sendiri.
Turut mengeluarkan markup HTML tepat yang diperlukan CSS itu, jadi tiada tekaan tentang nama kelas atau struktur elemen.
Empat corak animasi berbeza (spinner, dots, pulse, bar) meliputi kes penggunaan status loading yang paling biasa.
Animasi CSS tulen — tiada JavaScript, tiada aset imej, lebih kecil dan licin daripada GIF beranimasi.
Berjalan sepenuhnya dalam pelayar anda, percuma, tiada pendaftaran.

Cara menggunakannya

Pilih gaya loader: cincin berputar, titik melantun, bulatan berdenyut, atau bar kemajuan.
Seret slider saiz untuk skalakan loader lebih besar atau kecil.
Pilih warna — ini menjadi warna aksen loader (sempadan berputar, titik, atau isian bar).
Laraskan kelajuan untuk buat animasi lebih laju atau perlahan; kebanyakan loader UI dibaca terbaik antara 0.6s hingga 1.5s per kitaran.
Salin CSS yang dijana ke dalam stylesheet anda dan tampal cebisan HTML di mana sahaja loader perlu muncul.

Contoh

Input

Gaya: cincin berputar · Saiz: 40px · Warna: jingga · Kelajuan: 1.0s

Hasil

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Spinner cincin klasik: bulatan dengan sempadan yang hampir lutsinar pada tiga sisi dan warna pejal pada sisi keempat, diputar secara berterusan dengan animasi linear tanpa henti.

Kenapa CSS loader berbanding GIF beranimasi

GIF spinner beranimasi menjadi pilihan lalai selama bertahun-tahun, tetapi CSS loader hampir selalu pilihan lebih baik hari ini: ia hanya beberapa ratus bait teks berbanding fail imej binari, ia skala kepada sebarang saiz tanpa piksel kabur kerana ia dilukis dengan border dan transform, dan warnanya boleh diubah serta-merta dengan satu pembolehubah CSS berbanding mengeksport semula imej baharu.

Empat gaya di sini — spinner, dots, pulse, bar — juga yang paling kerap muncul dalam antara muka sebenar, daripada status loading butang hingga overlay seluruh halaman. Setiap satu hanya menggunakan perubahan transform dan opacity dalam keyframes-nya, yang boleh dianimasikan pelayar dengan licin pada GPU tanpa menyebabkan seluruh halaman tersekat-sekat.

Memilih gaya untuk situasi

Cincin berputar: pilihan paling neutral dan serba guna — berfungsi baik dalam butang dan status loading inline kecil.
Titik melantun: dibaca lebih ringan dan riang; biasa untuk penunjuk 'sedang menaip...' sembang dan waktu tunggu singkat.
Bulatan berdenyut: baik untuk penunjuk loading satu elemen atau sebagai titik status 'aktif/live'.
Bar kemajuan: membawa maksud pergerakan ke hadapan dan sering dijangka untuk pemuatan halaman atau proses berbilang langkah, walaupun tanpa peratusan tepat.

Menggunakan loader dalam projek anda

Tampal CSS yang dijana ke dalam stylesheet anda sekali, kemudian guna semula cebisan HTML di mana sahaja anda perlukan status loading — dalam butang semasa borang dihantar, atas kad semasa data diambil, atau di tengah overlay seluruh halaman. Kerana animasi itu CSS tulen, menghidup dan mematikannya semudah menambah atau membuang elemen daripada DOM, atau menyembunyikannya dengan display: none.

→ Penjana CSS Box-Shadow · Pemin CSS

Soalan lazim

Adakah loader ini berfungsi tanpa JavaScript?

Ya — setiap loader di sini dianimasikan secara tulen dengan @keyframes CSS dan sifat animation. JavaScript hanya diperlukan jika anda mahu tunjuk atau sembunyikan loader berdasarkan sesuatu peristiwa, seperti penghantaran borang atau permintaan fetch selesai.

Kenapa CSS yang dijana termasuk blok @keyframes?

Animasi CSS memerlukan dua bahagian: gaya asas elemen (saiz, warna, bentuk) dan peraturan @keyframes yang menerangkan bagaimana gaya itu berubah sepanjang tempoh animasi. Kedua-duanya diperlukan supaya animasi berjalan, jadi alat ini sentiasa menjana pasangan lengkap dan bukan sekadar gaya asas.

Bolehkah saya guna lebih daripada satu gaya loader pada halaman yang sama?

Ya. Setiap gaya menjana kelas CSS dan keyframes yang dinamakan unik sendiri (contohnya css-loader-spinner dan css-loader-dots), jadi anda boleh salin pelbagai gaya ke dalam stylesheet yang sama tanpa berlaku konflik.

Adakah animasi loader melambatkan halaman saya?

Tidak — keempat-empat gaya hanya menganimasikan transform dan opacity, yang boleh dikendalikan pelayar pada compositor/GPU tanpa mencetuskan pengiraan semula layout. Ini mengekalkan kelicinan walaupun pada peranti berkuasa rendah, tidak seperti menganimasikan sifat seperti width atau top secara terus.

Bagaimana saya tukar warna loader kemudian tanpa jana semula?

Buka CSS yang disalin dan tukar nilai warna terus — ia muncul sekali sahaja (sebagai border-top-color, background, atau serupa bergantung pada gaya) dan bukannya diulang di seluruh peraturan, jadi satu cari-dan-ganti mengemas kininya di mana-mana ia digunakan.