Tek Elemanlı Yükleyiciler: Noktalar

Bu serideki yükleyicilere bakıyoruz. Dahası, bazı yaygın yükleyici kalıplarını ve bunların tek bir div'den başka bir şey olmadan nasıl yeniden oluşturulacağını açıklıyoruz. Şu ana kadar ayırdık klasik dönen yükleyici. Şimdi muhtemelen çok iyi bildiğiniz başka bir tanesine bakalım: noktalar.

Nokta yükleyiciler her yerde. Düzenlidirler çünkü genellikle etrafta dans eden bir metin üç noktasına (...) benzeyen üç noktadan oluşurlar.

Buradaki amacımız aynı şeyi tek bir div öğesinden yapmaktır. Başka bir deyişle, nokta başına bir bölüm veya her nokta için ayrı animasyonlar yoktur.

Yukarıdaki yükleyici örneği tek bir div öğesiyle, birkaç CSS bildirimiyle yapılmıştır ve sözde öğeler yoktur. CSS kullanarak iki tekniği birleştiriyorum background ve mask. İşimiz bittiğinde, bir arka plan degradesini canlandırmanın, her noktanın art arda yukarı ve aşağı hareket ettikçe renk değiştirdiği yanılsamasını yaratmaya nasıl yardımcı olduğunu göreceğiz.

Arka plan animasyonu

Arka plan animasyonuyla başlayalım:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Umarım bu oldukça basit görünür. Elimizdeki şey bir 180px-geniş .loader Her biri iki renk arasında sert renk duraklarına sahip iki konik degradeyi gösteren öğe; ilk degrade, ekranın üst yarısı boyunca kırmızı ve mavidir. .loaderve ikinci degrade alt yarı boyunca yeşil ve mor renktedir.

Yükleyicinin arka planının boyutlandırılma şekli (200% geniş), her yarıda aynı anda bu renklerden yalnızca birini görüyoruz. Sonra, arka plandaki degradelerin konumunu sonsuza kadar sola, sağa ve geri iten küçük bir animasyonumuz var.

Arka plan özellikleriyle uğraşırken - özellikle background-position — Her zaman kendime atıfta bulunurum Ayrıntılı bir açıklama yaptığım Yığın Taşması yanıtı tüm bunların nasıl çalıştığı hakkında. CSS arka plan hilelerinden rahatsızsanız, bundan sonra ne olacağına yardımcı olması için bu cevabı okumanızı şiddetle tavsiye ederim.

Animasyonda ilk katmanın şu şekilde olduğuna dikkat edin: Y=0% (en üste yerleştirilir) iken X şu tarihten itibaren değişiyor: 0% için 100%. İkinci katman için de aynısını yapıyoruz. X fakat Y=100% (alta yerleştirilir).

Neden bir conic-gradient() yerine linear-gradient()?

İyi soru! Sezgisel olarak, bunun gibi iki renkli degradeler oluşturmak için doğrusal bir degrade kullanmalıyız:

linear-gradient(90deg, red 50%, blue 0)

Ancak aynı sonuca bir kullanarak da ulaşabiliriz. conic-gradient() — ve daha az kodla. Kodu azaltıyoruz ve süreçte yeni bir numara öğreniyoruz!

Renkleri sola ve sağa kaydırmak, renkleri değiştiriyormuşuz gibi görünmenin güzel bir yoludur, ancak bunun yerine renkleri anında değiştirirsek daha iyi olabilir; bu şekilde, bir yükleyici noktasının aynı anda iki rengi yanıp sönme şansı olmaz . Bunu yapmak için, hadi değiştirelim animation'nin zamanlama fonksiyonu linear için steps(1)

Yükleyici noktaları

Eğer şunu takip ettiyseniz bu serideki ilk makale, bahse girerim bundan sonra ne geleceğini biliyorsundur: CSS maskeleri! Maskeleri bu kadar harika yapan şey, bize bir nevi Bir arka planın bazı kısımlarını “kesip çıkarın” başka bir element şeklinde. Dolayısıyla, bu durumda, birkaç nokta yapmak, noktalar aracılığıyla arka plan degradelerini göstermek ve arka planın bir noktanın parçası olmayan kısımlarını kesmek istiyoruz.

Kullanacağız radial-gradient() bunun için:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Orada bazı kopya kodlar var, bu yüzden işleri hafifletmek için bir CSS değişkeni yapalım:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Vay canına. Ancak artık noktaların animasyonlu degradeler arasında yukarı ve aşağı hareket etmesine yardımcı olacak yeni bir animasyona ihtiyacımız var.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Evet, burada hepsi aynı konfigürasyona ve aynı boyuta sahip toplam üç radyal degrade var; animasyon her birinin konumunu güncelleyecektir. Şunu unutmayın: X Her noktanın koordinatı sabittir. mask-position ilk nokta solda olacak şekilde tanımlanır (0%), ikincisi merkezde (50%) ve sağdaki üçüncü (100%). Biz sadece güncelliyoruz Y koordine etmek 0% için 100% noktaların dans etmesini sağlamak için.

İşte aldığımız şey:

Şimdi bunu degrade animasyonumuzla birleştirdiğinizde sihir gerçekleşmeye başlar:

Nokta yükleyici çeşitleri

Son örnekte yaptığımız CSS değişkeni, yeni renkleri değiştirmeyi ve aynı yükleyicinin daha fazla varyasyonunu oluşturmayı çok daha kolay hale getiriyor. Örneğin farklı renkler ve boyutlar:

Noktalarımız için başka bir harekete ne dersiniz?

Burada tek yaptığım, animasyonu farklı konumları dikkate alacak şekilde güncellemekti ve aynı kod yapısına sahip başka bir yükleyici elde ettik!

Maske katmanları için kullandığım animasyon tekniği arka plan katmanlarıyla da kullanılarak tek renkle birçok farklı yükleyici oluşturulabilir. Bununla ilgili detaylı bir yazı yazdım. Aynı kod yapısından sadece birkaç değeri değiştirerek farklı varyasyonlar oluşturabildiğimizi göreceksiniz. Yazının sonunda birkaç örnek paylaşıyorum.

Neden tek noktalı bir yükleyici olmasın?

Aynı tekniği kullandığım için ancak daha basit bir mantıkla bunu anlamak oldukça kolay olmalı:

İşte animasyonunu da yaptığım başka bir yükleyici örneği radial-gradient ile birlikte CSS filtreleri ve mix-blend-mode damla efekti yaratmak için:

Kodu kontrol ederseniz, orada yaptığım tek şeyin animasyon oluşturmak olduğunu göreceksiniz. background-position, tıpkı önceki yükleyicide yaptığımız gibi, ancak bir çizgi ekleyerek background-size blobun noktaları emdikçe büyüdüğünü göstermek için.

Bu damla efektinin ardındaki büyüyü anlamak istiyorsanız şu adrese başvurabilirsiniz: bu etkileşimli slaytlar (Yalnızca Chrome) tarafından ana tudor çünkü konuyu çok iyi ele alıyor!

İşte bu sefer farklı bir teknik kullanan başka bir nokta yükleyici fikri:

Bu yalnızca 10 CSS bildirimi ve bir ana karedir. Ana eleman ve onun iki sözde elemanı, bir radyal eğimle aynı arka plan konfigürasyonuna sahiptir. Her biri toplamda üç nokta olacak şekilde bir nokta oluşturur. Animasyon, her nokta için farklı gecikmeler kullanarak degradeyi yukarıdan aşağıya doğru hareket ettirir.

Bu demoda CSS Grid'in nasıl kullanıldığına dikkat edin. Bu, şebekenin varsayılanından yararlanmamızı sağlar stretch böylece her iki sözde öğe de ebeveynlerinin tüm alanını kaplayacak şekilde hizalanır. Boyutlandırmaya gerek yok! ile biraz itin translate() ve hepimiz hazırız.

Daha fazla örnek!

Konuyu netleştirmek için, size aslında incelediklerimizin varyasyonları olan bir dizi ek örnekle baş başa bırakmak istiyorum. Demoları izledikçe burada ele aldığımız yaklaşımların son derece esnek olduğunu ve tonlarca tasarım olanağı sunduğunu göreceksiniz.

Sıradaki…

Tamam, bu makalede nokta yükleyicileri ve sonuncusunda döndürücüleri ele aldık. Bu dört bölümlük serinin bir sonraki makalesinde dikkatimizi başka bir yaygın yükleyici türüne çevireceğiz: Barlar. Şu ana kadar öğrendiklerimizin çoğunu ele alacağız ve bunları mümkün olduğunca az kodlu ve çok esnekliğe sahip başka bir tek öğeli yükleyici oluşturacak şekilde nasıl genişletebileceğimizi göreceğiz.

---

Tek Elemanlı Yükleyiciler: Noktalar aslen yayınlandı CSS Hileleri. Malısın bülteni al.

• Akıllı para. Avrupa'nın En İyi Bitcoin ve Kripto Borsası.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. SERBEST ERİŞİM.
• KriptoHawk. Altcoin Radarı. Ücretsiz deneme.
• Kaynak: https://css-tricks.com/single-element-loaders-the-dots/