Penjana Loader CSS
Penjana loader CSS percuma: sepuluh spinner pemuatan CSS tulen dengan kawalan saiz, kelajuan, ketebalan dan warna secara langsung, kemudian salin HTML dan CSS sedia tampal.
Apakah yang dibina Penjana Loader CSS?
Ia membina penunjuk pemuatan beranimasi dalam CSS tulen: pemutar, titik, bar, riak, denyut, orbit, balik, gelombang, lantun dan cincin gradien. Setiap loader dijana dengan saiz, kelajuan, ketebalan dan warna pilihan anda, sedia disalin sebagai HTML plus CSS.
Adakah loader perlukan JavaScript atau imej?
Tidak. Setiap loader ialah elemen HTML biasa yang dianimasikan dengan keyframes CSS. Tiada imej, fon ikon, pustaka atau skrip runtime — blok CSS sahaja sudah memadai.
Bagaimana menambah loader ke laman saya?
Klik loader dalam grid, salin blok HTML ke tempat loader patut muncul, kemudian tampal blok CSS ke dalam helaian gaya anda. CSS itu bersendirian dan sudah mengandungi peraturan @keyframes yang diperlukan.
Apakah yang diubah oleh empat parameter itu?
Saiz mengawal lebar dan tinggi semua loader, Kelajuan mengubah tempoh animasi, Ketebalan menjejaskan sempadan dan lebar bar, manakala Warna mengecat semula semua elemen dalam grid dan kod serta-merta.
Mengapa loader yang disalin tidak beranimasi?
Punca paling biasa ialah menyalin peraturan kelas sahaja tanpa blok @keyframes, atau menamakan semula kelas dalam HTML tetapi tidak dalam CSS. Salin kedua-dua blok seperti dijana dan kekalkan nama kelas.
Adakah animasi ini berprestasi baik?
Ya. Semua loader hanya menganimasikan transform dan opacity, sifat yang digubal GPU tanpa mencetus susun atur atau cat, jadi kekal lancar walaupun ada beberapa loader dalam satu halaman.
Adakah loader mesra aksesibiliti?
Spinner ialah hiasan visual, pembaca skrain mendapat manfaat daripada petunjuk teks. Tambah label tersembunyi seperti "Memuatkan" di sebelah loader, atau gunakan aria-hidden="true" pada loader dan umumkan kemajuan berasingan.
Adakah data dimuat naik ke pelayan?
Tidak. Penjana berjalan sepenuhnya dalam pelayar anda. Tetapan anda tidak pernah meninggalkan halaman dan kod yang dijana dibina setempat pada peranti anda.
Cara Menggunakan Penjana Loader CSS
Penjana loader CSS membina penunjuk pemuatan beranimasi dalam CSS tulen — tanpa imej, tanpa JavaScript, tanpa kebergantungan. Pilih satu daripada sepuluh gaya, laraskan saiz, kelajuan, ketebalan dan warna, kemudian salin HTML dan CSS yang dijana terus ke dalam projek anda.
- Laraskan parameter global dengan empat kawalan: Saiz menetapkan kotak setiap loader, Kelajuan menukar tempoh animasi, Ketebalan mengawal sempadan dan lebar bar, dan Warna mengecat setiap elemen.
- Layari grid: kesepuluh loader kekal beranimasi secara langsung dengan tetapan semasa anda jadi boleh dibandingkan sepintas lalu. Klik mana-mana loader untuk memilihnya.
- Panel butiran menunjukkan loader terpilih lebih besar, bersama petikan HTML dan CSS yang sepadan (termasuk @keyframes yang diperlukannya).
- Tekan Salin HTML atau Salin CSS untuk menghantar setiap blok ke papan keratan. CSS itu berdikari — tampalkan ke dalam helaian gaya anda dan letakkan HTML di mana loader patut muncul.
- Ubah mana-mana parameter dan grid, pratonton butiran serta kedua-dua blok kod dikemas kini serta-merta.
Oleh sebab loader ini CSS tulen, ia hampir tidak memakan lebar jalur dan kekal tajam pada sebarang paparan. Pasangkan animasi dengan label teks demi kebolehcapaian, dan elakkan tempoh di bawah sekitar 0.5 s — penunjuk yang berkelip terlalu pantas lebih membimbangkan daripada menenangkan.
Alat Berkaitan
- Peminit CSS Peminit CSS dalam talian percuma. Mampat dan optimumkan kod CSS serta-merta dengan membuang ruang putih, komen dan aksara tidak perlu. Kurangkan saiz fail untuk prestasi web lebih pantas.
- Pengindah CSS Format dan indahkan kod CSS serta-merta. Tukar CSS yang diminifikasi kepada kod mudah dibaca dengan pilihan boleh disesuaikan.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.
- Penjana Clip Path CSS Penjana clip-path CSS dalam talian percuma. Reka bentuk polygon, circle, ellipse dan inset dengan titik boleh seret, pratonton langsung dan salin kod CSS sekali klik.
- Penjana Border Radius CSS Penjana border-radius CSS visual. Laraskan setiap sudut secara bebas dengan pratonton masa nyata dan salin kod CSS serta-merta.