Tek Elemanlı Yükleyiciler: Çubuklar

İplikçilere baktık. Noktalara baktık. Şimdi yükleyiciler için başka bir yaygın modeli ele alacağız: Barlar. Ve serinin bu üçüncü makalesinde de diğer makalelerde yaptığımızın aynısını tek bir öğeyle ve varyasyon oluşturmayı kolaylaştıran esnek CSS ile yapacağız.

Bir değil iki değil tam 20 tane çubuk yükleyici örneğiyle başlayalım.

Ne?! Her birini detaylandıracak mısınız? Bu bir makale için çok fazla!

İlk bakışta öyle görünebilir! Ancak hepsi aynı kod yapısına dayanıyor ve varyasyonlar oluşturmak için yalnızca birkaç değeri güncelliyoruz. CSS'nin tüm gücü budur. Tek bir yükleyicinin nasıl oluşturulacağını öğrenmiyoruz, ancak yalnızca aynı kod yapısını kullanarak istediğimiz kadar yükleyici oluşturmamıza olanak tanıyan farklı teknikleri öğreniyoruz.

Hadi biraz bar yapalım!

Kullanarak onlar için boyutları tanımlayarak başlıyoruz. width (Ya da height) Ile aspect-ratio Orantıyı korumak için:

.bars { width: 45px; aspect-ratio: 1;
}

Arka planda doğrusal bir degradeye sahip üç çubuğu "sahte" hale getiriyoruz - bu serinin 2. Bölümünde nokta yükleyicileri nasıl oluşturduğumuza çok benzer.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Yukarıdaki kod bize aşağıdaki sonucu verecektir:

Bu serideki diğer makaleler gibi, birçok konuyu ele alacağız. background hile. Bu nedenle, eğer çok hızlı atladığımızı hissederseniz veya biraz daha ayrıntıya ihtiyacınız olduğunu hissederseniz, lütfen bunlara göz atın. Ayrıca benimkini de okuyabilirsiniz Verdiğim yerde Yığın Taşması cevabı detaylı açıklama tüm bunların nasıl çalıştığı hakkında.

Çubukları canlandırmak

Çubuk yükleyiciyi oluşturmak için elemanın boyutunu veya konumunu canlandırıyoruz. Aşağıdaki animasyon anahtar karelerini tanımlayarak boyutu canlandıralım:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Bakın orada neler oluyor? %0 ile %100 arasında animasyon, background-size öğenin arka plan gradyanının. Her ana kare üç arka plan boyutunu ayarlar (her degrade için bir tane).

Ve işte elde ettiğimiz şey:

Boyutlar veya konumlar için farklı animasyon konfigürasyonlarıyla oynayarak elde edebileceğimiz tüm olası varyasyonları hayal etmeye başlayabilir misiniz?

Boyutu şu şekilde sabitleyelim: 20% 50% ve bu sefer konumları güncelleyin:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…bu da bize başka bir yükleyici kazandırıyor!

Muhtemelen şimdiye kadar işin sırrını anlamışsınızdır. İhtiyacınız olan tek şey, bir ana kareye çevireceğiniz bir zaman çizelgesi tanımlamaktır. Boyutu, konumu veya her ikisini birden canlandırarak! — Parmaklarımızın ucunda sonsuz sayıda yükleme olanağı var.

Ve böyle bir tekniğe alıştığımızda daha da ileri giderek daha karmaşık bir degrade kullanabiliriz. Daha yükleyiciler.

Bu demodaki son iki örneği bekleyin; tüm çubuk yükleyiciler aynı temel işaretlemeyi ve stilleri ve farklı animasyon kombinasyonlarını kullanır. Kodu açın ve her kareyi bağımsız olarak görselleştirmeye çalışın; düzinelerce yapmanın ne kadar önemsiz olduğunu göreceksiniz — yüzlerce değilse - varyasyonlardan.

Süslenmek

Nokta yükleyicilerle yaptığımız maske numarasını hatırladınız mı? bu serinin ikinci makalesi? Aynısını burada da yapabiliriz!

Yukarıdaki mantığın tamamını şunun içine uygularsak mask özelliği, yükleyicilerimize süslü bir renk eklemek için herhangi bir arka plan yapılandırmasını kullanabiliriz.

Bir demo alıp güncelleyelim:

Yaptığım tek şey tüm bilgileri güncellemekti background-* ile mask-* ve bir degrade renklendirme ekledim. Bu kadar basit ama yine de harika bir yükleyicimiz daha var.

Peki noktalarla çubuklar arasında bir fark yok mu?

Fark yok! Mümkün olduğu kadar çok örneği ele almak için iki farklı makale yazdım ancak her ikisinde de aynı tekniklere güveniyorum:

1. Şekilleri oluşturmak için degradeler (noktalar veya çubuklar veya belki başka bir şey)
2. animasyon background-size ve / veya background-position yükleyici animasyonu oluşturmak için
3. Renk dokunuşu eklemek için maske ekleme

Çubukların yuvarlanması

Bu sefer çubuklarımızın kenarlarını yuvarlayabileceğimiz farklı bir şey deneyelim.

Bir öğeyi kullanma ve onun ::before ve ::after sözde üç özdeş çubuk tanımlarız:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Bu bize bu sefer doğrusal bir eğime dayanmadan üç çubuk verir:

Şimdi işin püf noktası bu çubukları hoş bir degradeyle doldurmak. Sürekli bir degradeyi simüle etmek için şunu oynamamız gerekir: background özellikler. Yukarıdaki şekilde yeşil alan yükleyicinin kapladığı alanı tanımlamaktadır. Bu alan degradenin boyutunda olmalıdır ve eğer matematik yaparsak, etiketli her iki tarafın çarpımına eşit olur. S diyagramda veya background-size: var(--s) var(--s).

Öğelerimiz ayrı ayrı yerleştirildiğinden, hepsinin üst üste geldiğinden emin olmak için her birinin içindeki degradenin konumunu güncellememiz gerekiyor. Bu şekilde, gerçekte üç tane olmasına rağmen sürekli bir degradeyi simüle ediyoruz.

Ana öğe için (merkeze yerleştirilmiş), arka planın ortada olması gerekir. Aşağıdakileri kullanıyoruz:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Soldaki sözde eleman için soldaki arka plana ihtiyacımız var

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

Ve sağdaki sözde için arka planın sağa konumlandırılması gerekiyor:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Aynı CSS değişkenini kullanarak, --_iÇeviri için kullandığımız kodu şu şekilde yazabiliriz:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Şimdi tek yapmamız gereken yüksekliği canlandırmak ve biraz gecikme eklemek! İşte farklı olan tek şeyin renk ve boyut olduğu üç örnek:

Tamamlayan

Umarım şu ana kadar karmaşık görünümlü yükleme animasyonları yapmak için sahip olduğunuz tüm güçlerden dolayı kendinizi çok cesaretlendirilmiş hissediyorsunuzdur. İhtiyacımız olan tek şey, çubukları çizmek için degradeler veya sahte öğeler, ardından nesneleri hareket ettirmek için bazı anahtar kareler olan bir öğedir. Sonsuz sayıda olasılık elde etmenin tüm tarifi bu, o yüzden dışarı çıkın ve güzel şeyler pişirmeye başlayın!

Bir sonraki yazıya kadar sizi birleştirdiğim eğlenceli bir yükleyici koleksiyonuyla baş başa bırakacağım. noktalar ve Barlar!

---

Tek Elemanlı Yükleyiciler: Çubuklar 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-bars/