CSS Yükleyici Oluşturucu
Ücretsiz CSS yükleyici oluşturucu: saf CSS ile on yükleme spinneri, canlı boyut, hız, kalınlık ve renk ayarı ve yapıştırmaya hazır HTML ile CSS kopyalama.
CSS yükleyici oluşturucu ne üretir?
Saf CSS ile animasyonlu yükleme göstergeleri üretir: döner, noktalar, çubuklar, halka dalga, nabız, yörünge, çevirme, dalga, zıplama ve geçiş halkası. Her biri seçtiğiniz boyut, hız, kalınlık ve renkle üretilir; HTML artı CSS olarak kopyalanmaya hazırdır.
Yükleyiciler JavaScript veya görsel ister mi?
Hayır. Her yükleyici, CSS keyframes ile animasyonlanan sıradan HTML öğeleridir. Görsel, ikon fontu, kütüphane veya çalışma anı betiği yok — yalnızca CSS bloğu yeter.
Yükleyiciyi siteme nasıl eklerim?
Izgaradan bir yükleyiciye tıklayın, HTML bloğunu görünmesini istediğiniz yere yapıştırın ve CSS bloğunu stil sayfanıza ekleyin. CSS kendi kendine yeterlidir ve gerekli @keyframes kurallarını içerir.
Dört parametre neyi değiştirir?
Boyut tüm yükleyicilerin genişlik ve yüksekliğini, hız animasyon süresini, kalınlık kenarlıkları ve çubuk genişliklerini belirler; renk ızgaradaki ve koddaki her öğeyi anında yeniden boyar.
Kopyaladığım yükleyici neden animasyonlu değil?
En yaygın neden, @keyframes bloğu olmadan yalnızca sınıf kurallarını kopyalamak veya sınıfı HTML'de yeniden adlandırıp CSS'de adlandırmamaktır. İki bloğu olduğu gibi kopyalayın ve sınıf adlarını değiştirmeyin.
Animasyonlar performanslı mı?
Evet. Tüm yükleyiciler yalnızca transform ve opacityyi animasyonlar; tarayıcı bunları GPU'da, layout ve paint tetiklemeden birleştirir, böylece sayfada birden çok yükleyici olsa da akıcılık sürer.
Yükleyiciler erişilebilir mi?
Spinnerler görsel süslemelerdir; ekran okuyucular metin ipucundan yararlanır. Yükleyicinin yanına "Yükleniyor" gibi gizli bir etiket ekleyin ya da yükleyiciye aria-hidden="true" verip ilerlemeyi ayrıca bildirin.
Veriler bir sunucuya gönderiliyor mu?
Hayır. Oluşturucu tamamen tarayıcınızda çalışır. Ayarlarınız sayfadan asla çıkmaz ve üretilen kod cihazınızda yerel olarak birleştirilir.
CSS Yükleyici Oluşturucu Nasıl Kullanılır
CSS Yükleyici Oluşturucu, saf CSS ile animasyonlu yükleme döndürücüleri kurar — görsel yok, JavaScript yok, bağımlılık yok. On stilden birini seçin, boyut, hız, kalınlık ve rengi ayarlayın, sonra üretilen HTML ve CSS'yi doğrudan projenize kopyalayın.
- Genel parametreleri dört denetimle ayarlayın: Boyut her yükleyicinin kutusunu belirler, Hız animasyon süresini değiştirir, Kalınlık kenarlıkları ve çubuk genişliklerini denetler, Renk her öğeyi boyar.
- Izgaraya göz atın: on yükleyicinin tamamı geçerli ayarlarınızla canlı animasyonlu kalır, böylece onları tek bakışta karşılaştırırsınız. Seçmek için herhangi bir yükleyiciye tıklayın.
- Ayrıntı paneli seçili yükleyiciyi daha büyük gösterir; yanında HTML parçacığı ve eşleşen CSS (gereken @keyframes dâhil) vardır.
- Her bloğu panoya göndermek için HTML kopyala veya CSS kopyala'ya basın. CSS kendi başına yeterlidir — stil sayfanıza yapıştırın ve yükleyicinin görünmesi gereken yere HTML'yi koyun.
- Herhangi bir parametreyi değiştirin; ızgara, ayrıntı önizlemesi ve iki kod bloğu anında güncellenir.
Saf CSS oldukları için yükleyiciler neredeyse hiç bant genişliği harcamaz ve her ekranda keskin kalır. Erişilebilirlik için animasyonu bir metin etiketiyle eşleştirin ve yaklaşık 0,5 sn altındaki sürelerden kaçının — çok hızlı yanan döndürücüler güvence vermekten çok endişelendirir.
İlgili Araçlar
- CSS Sıkıştırıcı Ücretsiz çevrimiçi CSS sıkıştırıcı. Boşlukları, yorumları ve gereksiz karakterleri kaldırarak CSS kodunu anında sıkıştırın ve optimize edin. Daha hızlı web performansı için dosya boyutunu azaltın.
- CSS Güzelleştirici CSS kodunu anında biçimlendirin ve güzelleştirin. Özelleştirilebilir seçeneklerle sıkıştırılmış CSS'i okunabilir koda dönüştürün.
- Border Radius Oluşturucu Ücretsiz çevrimiçi yaratıcı border radius oluşturucu. 8 kulbu sürükleyin veya bir blob hazır şekli seçin, organik CSS biçimleri oluşturun ve kodu anında kopyalayın.
- Renk Dönüştürücü Ücretsiz çevrimiçi renk dönüştürücü. HEX, RGB, HSL, HSV formatlarını görsel seçici ile anında dönüştürün. %100 gizli, tarayıcınızda çalışır.
- CSS Easing Oluşturucu Ücretsiz çevrimiçi CSS easing oluşturucu. Etkileşimli eğri üzerinde cubic-bezier kontrol noktalarını sürükleyin, 18 hazır ayardan birini seçin, döngüde oluşan top animasyonunu izleyin ve zamanlama fonksiyonunu anında kopyalayın.
- CSS Text Shadow Oluşturucu Ücretsiz çevrimiçi text-shadow oluşturucu. Ofset, bulanıklık, renk ve opaklıkla birden fazla gölge katmanı üst üste dizin, Neon, 3D, Retro hazır ayarlarını deneyin ve CSS'i anında kopyalayın.
- CSS Clip Path Oluşturucu Ücretsiz çevrimiçi CSS clip-path oluşturucu. Sürüklenebilir noktalarla polygon, circle, ellipse ve inset şekilleri tasarlayın, canlı önizleyin ve tek tıkla CSS kodunu kopyalayın.
- CSS Border Radius Oluşturucu Görsel CSS border radius oluşturucu. Her köşeyi bağımsız ayarlayın, gerçek zamanlı önizleme ile CSS kodunu anında kopyalayın.