CSS Yükleniyor Animasyonu Üreteci
Boyut, renk ve hız ayarlı 12 saf CSS yükleyici; kopyalamaya hazır kod.
Alttaki HTML ve CSS kodunu üretmek için bir yükleyiciye tıklayın.
CSS Yükleniyor Animasyonu Üreteci hakkında
Bir ögeyi transform: rotate ile döndürdüğünüzde iş tarayıcının compositor katmanında yapılır ve ana iş parçacığı meşgul edilmez; aynı hareketi width veya margin değiştirerek kurarsanız tarayıcı her karede yeniden yerleşim hesaplar ve yükleyici tam da sayfa yoğunken takılır. Buradaki 12 yükleyicinin tamamı saf CSS ile yazıldı ve Dalga dışında hepsi yalnızca transform ile opacity canlandırır. Boyutu, kalınlığı, tur süresini ve iki rengi ayarlayıp hazır HTML ve CSS kodunu alırsınız.
CSS Yükleniyor Animasyonu Üreteci nasıl kullanılır
- 1
Galerideki 12 yükleyiciden birine tıklayın; seçili kart turkuaz çerçeveyle işaretlenir.
- 2
Boyut, çizgi kalınlığı ve tur süresini kaydırıcılarla ayarlayın; 12 örnek de aynı anda güncellenir.
- 3
Ana rengi ve ikinci rengi seçin, önizleme arka planını koyu ve açık yaparak kontrastı iki temada da görün.
- 4
Gerekirse aria-label metnini değiştirin ve prefers-reduced-motion kuralını ekleyin.
- 5
HTML ve CSS kodunu ayrı ayrı veya birlikte kopyalayıp doğrudan projenize yapıştırın.
Sıkça sorulan sorular
Bu yükleyiciler JavaScript veya görsel dosyası gerektirir mi?
Hayır. Çıktı sade bir div ile birkaç CSS kuralı ve bir keyframes bloğundan ibarettir; SVG, GIF, ikon fontu ya da betik gerekmez. Animasyon CSS tarafında çalıştığı için sayfanın JavaScript kodu henüz yürütülmemişken bile döner, ki yükleyiciye genellikle tam o anda ihtiyaç duyarsınız.
prefers-reduced-motion seçeneği animasyonu neden tümüyle kapatmıyor?
Çoğu kişi animation: none yazar; bu, ögeyi sıfırıncı kareye kilitler. Dalga yükleyicisinde o karede genişlik sıfırdır, Nabız yükleyicisinde ise küçültülmüş ve yarı saydamdır; yani gösterge kaybolur ve kullanıcı sayfanın donduğunu sanır. Bu araç kapatmak yerine süreyi dört katına çıkarır, hareket yumuşar ama gösterge görünür kalır.
Düşük donanımlı telefonlar için hangisi daha uygun?
Halka, Işınlar, Çubuklar ve Solan noktalar yalnızca transform ve opacity canlandırdığı için GPU üzerinde kalır. Dalga ise büyüyen daire biçimi başka türlü kurulamadığından bilerek width ve height değerlerini canlandırır ve her karede yeniden yerleşime yol açar; onu küçük boyutta ve sayfada yalnızca bir kez kullanın.
Renkleri kendi CSS değişkenlerime bağlayabilir miyim?
Evet. Tarayıcının renk seçicisi yalnızca hex ile çalıştığından çıktıda #22d3ee gibi sabit bir değer bulunur; kopyaladıktan sonra bunu var(--brand) ile değiştirin. rgba(...) ile yazılan iz rengi yerine de color-mix(in srgb, var(--brand) 22%, transparent) kullanabilirsiniz.