CSS Yükleyici Oluşturucu
CSS Loader Generator; spinner, zıplayan noktalar, halka, pulse, çubuklar ve çift halka olmak üzere altı stilde, boyutu, rengi, hızı ve kalınlığı ayarlanabilen saf CSS yükleme animasyonları oluşturur ve hem CSS hem HTML çıktısı verir.
Bu araç hakkında
CSS Loader Generator; spinner, zıplayan noktalar, halka, pulse, çubuklar ve çift halka olmak üzere altı stilde, boyutu, rengi, hızı ve kalınlığı ayarlanabilen saf CSS yükleme animasyonları oluşturur ve hem CSS hem HTML çıktısı verir.
Nasıl kullanılır
- Bir loader stili seçin.
- Boyutu, rengi, hızı ve kalınlığı ayarlayın.
- Canlı önizlemeyi kontrol edin.
- Copy CSS + HTML'e tıklayın ve ikisini de sayfanıza yapıştırın.
Bilmekte fayda var
- Saf CSS loader'lar görsel, GIF veya JavaScript gerektirmez.
- Spinner'lar @keyframes ve transform: rotate() ile döner; bu da verimli bir animasyon yöntemidir.
- İşaretleme tek bir öğedir; noktalar ve çubuklar için birkaç alt öğe kullanılır.
- Ekran okuyucuların loader'ı duyurması için role="status" ve “Loading…” gibi görsel olarak gizli bir etiket ekleyin.
- prefers-reduced-motion altında loader'ları yavaşlatmayı veya durdurmayı düşünün.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
CSS'te yükleme spinner'ı nasıl yapılır?
Kare bir öğeye bir kenarı renkli bir border, border-radius: 50% ve dönen bir @keyframes animasyonu verin — ya da bu oluşturucudan bir tane kopyalayın.
CSS loader'lar GIF'lerden daha mı iyi?
Genellikle evet: daha küçüktürler, her boyutta keskin kalırlar ve renkleri ile hızları CSS ile değiştirilebilir.
Bir loader'ı nasıl erişilebilir yaparım?
Onu role="status" olan bir öğenin içine alın ve yardımcı teknolojilerin duyurabilmesi için “Loading…” gibi gizli bir metin ekleyin.
Loader'ı sayfada nasıl ortalarım?
display: flex; justify-content: center; align-items: center; olan bir kapsayıcıya yerleştirin.