CSS Yükleyici Oluşturucu

CSS Yükleyici Oluşturucu nedir?

CSS Yükleyici Oluşturucu, bir kütüphane eklemeden saf CSS yükleme göstergesine ihtiyaç duyan web tasarımcıları ve ön uç geliştiriciler için ücretsiz, tarayıcı içi bir araçtır. Spinner, halka, noktalar, çubuklar ve pulse olmak üzere beş stilden birini seçin, ardından piksel cinsinden boyutu, ana rengi, bir animasyon döngüsünün saniye cinsinden hızını, çizgi kalınlığını ve nokta ya da çubuk sayısını kontrol edin. Siz düzenledikçe canlı önizleme canlanır ve eşleşen HTML işaretlemesi ile @keyframes içeren bir CSS stil bloğu anında güncellenir, böylece doğrudan bir sayfaya bırakabilirsiniz. Bunu düğmeler, sayfa yükleyiciler, iskelet durumları ve eşzamansız yer tutucular için ya da CSS animasyonu ile @keyframes'in her efekti nasıl yönlendirdiğini öğrenmek için kullanın.

CSS Yükleyici Oluşturucu nasıl kullanılır

1. Bir yükleyici stili seçin: Spinner, Halka, Noktalar, Çubuklar veya Pulse.
2. Boyutu piksel cinsinden ayarlayın ve örnekle ya da bir değer yazarak bir renk seçin.
3. Bir tam döngü için animasyon hızını saniye cinsinden ayarlayın.
4. Çizgi kalınlığını (spinner ve halka) ya da nokta veya çubuk sayısını ayarlamak için Ayarlar'ı açın.
5. Canlı önizlemenin canlanmasını izleyin, ardından oluşturulan HTML ve CSS'i kopyala düğmesiyle kopyalayın.

Örnekler

Stil: Spinner, boyut 48px, renk #4f86f7, hız 1s, kalınlık 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Stil: Noktalar, boyut 48px, renk #9333ea, hız 1s, adet 3

<div class="dd-loader"><div></div><div></div><div></div></div> kademeli animation-delay ile noktalar dalga halinde ölçeklenir.

Sıkça sorulan sorular

Hangi yükleyici stilleri mevcut?

Beş: Spinner (dönen bir yay), Halka (daha kalın dönen bir halka), Noktalar (dalga halinde ölçeklenen noktalar), Çubuklar (aşağı yukarı uzayan çubuklar) ve Pulse (tek bir atan daire). Stil menüsüyle değiştirin; önizleme ve kod anında güncellenir.

Boyut, renk ve hız denetimleri ne yapar?

Boyut, yükleyicinin piksel ölçülerini belirler; renk ana rengi belirler (örnek seçiciyi kullanın ya da herhangi bir CSS rengi yazın) ve hız, bir animasyon döngüsünün saniye cinsinden süresidir. Kalınlık spinner ve halkanın çizgisini, adet ise kaç nokta veya çubuğun görüneceğini kontrol eder.

Oluşturulan CSS, JavaScript içermeyen saf CSS mi?

Evet. Parçacık, CSS animasyonu ve @keyframes kullanan bir <style> bloğu artı düz HTML'dir; bu yüzden herhangi bir JavaScript veya harici kütüphane olmadan çalışır. Sayfanıza yapıştırın ve kendi başına çalışsın.

Kalınlık ve adet neden her stili değiştirmiyor?

Kalınlık yalnızca spinner ve halkayı (kenarlık çizenler) etkiler, adet ise yalnızca noktaları ve çubukları (birden çok öğe oluşturanlar) etkiler. Diğer stiller bunları yok sayar, böylece seçtiğiniz stilin çıktısı temiz kalır.

Bir sunucuya bir şey yükleniyor mu?

Hayır. Yükleyici ve CSS'i tamamen tarayıcınızda yerel dize hesaplamasıyla oluşturulur - hiçbir ayar, renk veya kod asla bir sunucuya gönderilmez, bu yüzden çevrimdışı çalışır ve çalışmanızı gizli tutar.