Yükleme Animasyonu Üretici

Bu araç ne işe yarar?

Loading Spinner Generator, tarayıcınızda saf HTML ve CSS ile dönen yükleme animasyonları üretir. Ring, dots, bars ve pulse stilleri arasından seçip rengi, boyutu, hızı ve kenarlık kalınlığını ayarlar; kopyalanmaya hazır kodu anında alırsınız. Front-end geliştiriciler ve hiçbir kütüphane eklemek istemeyen herkes için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Dört spinner stili, tek tıkla kod

Araç dört hazır animasyon sunar: kenar dönen klasik Ring, sırayla zıplayan Dots, eşitleyici çubukları andıran Bars ve nabız gibi büyüyüp solan Pulse. Renk seçici ile ana rengi, Ring için ayrıca iz rengini belirlersiniz; boyut (20-100px), hız (0,2-3 sn) ve kenarlık kalınlığı kaydırıcılarla değişir. Her ayarda canlı önizleme güncellenir ve HTML ile @keyframes içeren CSS tek bir blokta kopyalanmaya hazır bekler.

Neden kütüphane yerine saf CSS?

Tek bir yükleme animasyonu için koca bir spinner kütüphanesi yüklemek gereksiz ağırlık ve bağımlılık demektir. Bu araç sadece birkaç satır CSS keyframe üretir; harici istek, JavaScript veya font gerektirmez, bu yüzden sayfanız daha hızlı yüklenir. Üretilen kod tamamen kendinizindir; sınıf adını değiştirebilir, projenize gömebilir veya bir tasarım sistemine ekleyebilirsiniz. Tüm işlem tarayıcıda çalışır, hiçbir veri sunucuya gönderilmez.

Sıkça sorulan sorular

Üretilen spinner kodunu projeme nasıl eklerim?

Kopyalanan çıktıdaki HTML parçasını göstermek istediğiniz yere, CSS bloğunu da stil dosyanıza veya bir <style> etiketine yapıştırın. Sınıf adları (örn. spinner-ring) sabittir, dilerseniz değiştirebilirsiniz.

Animasyon hızını ve boyutunu nasıl ayarlarım?

Hız (s) alanı bir tam dönüş süresini saniye cinsinden belirler; küçük değer daha hızlıdır. Boyut (px) spinner çapını, Ring stilinde Kenarlık alanı ise halka kalınlığını kontrol eder.

Track (iz) rengi seçeneği ne işe yarar?

İz rengi yalnızca Ring stilinde görünür ve dönmeyen halka zeminini boyar; üstündeki renkli yay ana renktedir. Bu kontrast spinnerin dönüşünü görünür kılar.