Tek Elemanlı Yükleyiciler: Döndürücü

Yalnızca CSS yükleyicileri yapmak en sevdiğim görevlerden biridir. Bu sonsuz animasyonlara bakmak her zaman tatmin edicidir. Ve tabii ki var bir sürü bunları yapmak için teknikler ve yaklaşımlar - gerek yok CodePen'den daha ileriye bakın kaç tane olduğunu görmek için. Ancak bu makalede, mümkün olduğunca az kod yazarak tek elemanlı bir yükleyicinin nasıl yapıldığını göreceğiz.

Sahibim 500'den fazla tekli div yükleyiciden oluşan bir koleksiyon yaptı ve bu dört bölümlük dizide, birçoğunu oluşturmak için kullandığım hileleri paylaşacağım. Küçük ayarlamaların eğlenceli varyasyonlara nasıl yol açabileceğini ve bunların gerçekleşmesi için ne kadar az kod yazmamız gerektiğini gösteren çok sayıda örneği ele alacağız!

Bu ilk makale için, daha yaygın yükleyici modellerinden birini oluşturacağız: dönen çubuklar:

İşte yaklaşım

Bu yükleyici için önemsiz bir uygulama, bir ana öğenin içine sarılmış her çubuk için bir öğe oluşturmak (toplam dokuz öğe için), ardından oynamaktır. opacity ve transform döndürme efekti elde etmek için.

Ancak benim uygulamam yalnızca bir öğe gerektiriyor:

<div class="loader"></div>

…ve 10 CSS bildirimi:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

hadi bunu parçalayalım

İlk bakışta, kod garip görünebilir, ancak düşündüğünüzden daha basit olduğunu göreceksiniz. İlk adım, elemanın boyutunu tanımlamaktır. Bizim durumumuzda, bu bir 150px Meydan. koyabiliriz aspect-ratio öğenin ne olursa olsun kare kalması için kullanmak.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

CSS yükleyicileri oluştururken, genel boyutu kontrol etmek için her zaman tek bir değere sahip olmaya çalışırım. Bu durumda, bu width ve ele aldığımız tüm hesaplamalar bu değere atıfta bulunacaktır. Bu, yükleyiciyi kontrol etmek için tek bir değeri değiştirmeme izin veriyor. Çok fazla ek değer ayarlamaya gerek kalmadan yükleyicilerimizin boyutunu kolayca ayarlayabilmek her zaman önemlidir.

Ardından, çubukları oluşturmak için gradyanları kullanacağız. Bu en zor kısım! hadi kullanalım bir oluşturmak için gradyan iki aşağıdaki gibi çubuklar:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Gradyanımız bir renk ve iki renk durağı ile tanımlanır. Sonuç, solma veya geçiş olmayan düz bir renktir. Boyut eşittir 34% geniş ve 8% uzun. Ayrıca merkeze yerleştirilmiştir (50%). İşin püf noktası, anahtar kelime değerinin kullanılmasıdır. space — bu degradeyi çoğaltır ve bize toplam iki çubuk verir.

Konum şartname:

Görüntü, kırpılmadan arka plan konumlandırma alanına sığabileceği sıklıkta tekrarlanır ve ardından görüntüler alanı dolduracak şekilde aralıklı olarak dağıtılır. İlk ve son görüntüler alanın kenarlarına dokunur.

Ben eşit bir genişlik kullanıyorum 34% bu, ikiden fazla çubuğa sahip olamayacağımız anlamına gelir (3*34% daha büyüktür 100%) ancak iki çubukla boş alanlarımız olacak (100% - 2 * 34% = 32%). Bu boşluk, iki çubuk arasındaki merkeze yerleştirilir. Başka bir deyişle, arasındaki gradyan için bir genişlik kullanırız. 33% ve 50% aralarında biraz boşluk olan en az iki çubuğumuz olduğundan emin olmak için. Değer space onları bizim için doğru bir şekilde yerleştiren şeydir.

Aynısını yapıyoruz ve üstte ve altta iki çubuk daha elde etmek için ikinci bir benzer gradyan yapıyoruz, bu da bize bir background özellik değeri:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Tekrardan kaçınmak için bunu bir CSS değişkeni kullanarak optimize edebiliriz:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Şimdi dört çubuğumuz var ve CSS değişkenleri sayesinde renk değerini bir kez yazabiliyoruz, bu da daha sonra güncellemeyi kolaylaştırıyor (yükleyicinin boyutunda yaptığımız gibi).

Kalan çubukları oluşturmak için .loader eleman ve onun ::before toplamda sekiz olmak üzere dört çubuk daha almak için sözde eleman.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

kullanımına dikkat edin display: grid. Bu, şebekenin varsayılanına güvenmemizi sağlar stretch sözde öğenin ebeveyninin tüm alanını kaplamasını sağlamak için hizalama; böylece üzerinde bir boyut belirtmeye gerek yok - kodu azaltan ve birçok değerle uğraşmamızı engelleyen başka bir numara!

Şimdi sözde elemanı döndürelim 45deg Kalan çubukları konumlandırmak için Hileyi görmek için aşağıdaki demoyu gezdirin:

opaklığın ayarlanması

Yapmaya çalıştığımız şey, dairesel bir yolda giderken arkasında solma çubuklarından oluşan bir iz bırakan bir çubuk olduğu izlenimini yaratmak. Şimdi ihtiyacımız olan şey, CSS ile yapacağımız bu izi yapmak için çubuklarımızın şeffaflığı ile oynamak. mask aşağıdaki gibi bir konik gradyan ile birleştirilir:

mask: conic-gradient(from 22deg,#0003,#000);

Hileyi daha iyi görmek için bunu tam renkli bir kutuya uygulayalım:

Kırmızı rengin şeffaflığı saat yönünde giderek artmaktadır. Bunu yükleyicimize uyguluyoruz ve farklı opaklığa sahip çubuklarımız var:

Gerçekte, her çubuk bir gradyanla maskelendiği ve iki yarı saydam renk arasına düştüğü için soluyor gibi görünür. Bu çalıştığında pek fark edilmez, bu yüzden tüm çubukların aynı renge ve farklı bir opaklığa sahip olduğunu söyleyebilmek gibi bir şey.

rotasyon

Yükleyicimizi almak için bir döndürme animasyonu uygulayalım. Sürekli değil, kademeli bir animasyona ihtiyacımız olduğunu unutmayın, bu yüzden kullanıyorum steps(8). 8 çubukların sayısından başka bir şey değildir, bu nedenle kaç çubuk kullanıldığına bağlı olarak bu değer değiştirilebilir.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Bu kadar! Yalnızca bir eleman ve birkaç satır CSS içeren yükleyicimiz var. Bir değer ayarlayarak boyutunu ve rengini kolayca kontrol edebiliriz.

Sadece kullandığımız için ::before sözde eleman, kullanarak dört çubuk daha ekleyebiliriz ::after toplamda 12 çubukla ve hemen hemen aynı kodla bitecek şekilde:

Göz önünde bulundurulması için sözde öğelerimizin rotasyonunu güncelliyoruz 30deg ve 60deg yerine 45deg sekiz yerine on iki adımlı bir animasyon kullanırken. Ben de yüksekliği azalttım 5% yerine 8% çubukları biraz daha ince yapmak için.

Sahip olduğumuza da dikkat edin grid-area: 1/1 sözde unsurlar üzerinde. Bu, onları birbiri üzerine yığılmış olarak aynı alana yerleştirmemize izin verir.

Bil bakalım ne oldu? Aynı yükleyiciye başka bir uygulama kullanarak ulaşabiliriz:

Kodun arkasındaki mantığı çözebilir misiniz? İşte bir ipucu: opaklık artık bir CSS ile ele alınmıyor mask ancak degradenin içinde ve aynı zamanda opacity özelliği.

Bunun yerine neden noktalar olmasın?

Bunu tamamen yapabiliriz:

Kodu kontrol ederseniz, artık doğrusal yerine radyal bir gradyan ile çalıştığımızı göreceksiniz. Aksi takdirde, maskenin opaklık izlenimi yarattığı konsept tamamen aynıdır, ancak şekilleri çizgi yerine daire şeklinde yaptık.

Aşağıda, yeni degrade yapılandırmasını gösteren bir şekil verilmiştir:

Safari kullanıyorsanız, demonun hatalı olabileceğini unutmayın. Bunun nedeni, Safari'nin şu anda at radyal gradyanlarda sözdizimi. Ancak bunun üstesinden gelmek için gradyanı biraz yeniden yapılandırabiliriz:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Daha fazla yükleyici örneği

İşte bir öncekine benzer bir döner yükleyici için başka bir fikir.

Bunun için sadece güveniyorum background ve mask şekli oluşturmak için (sözde eleman gerekmez). Aynı koddan çok sayıda varyasyon oluşturabilmek için yapılandırmayı CSS değişkenleriyle de tanımlıyorum - yalnızca CSS değişkenlerinin güçlerine başka bir örnek. Bu teknik hakkında başka bir makale yazdım daha fazla ayrıntı istiyorsanız.

Bazı tarayıcıların hala bir -webkit- için önek mask-composite kendi değer kümesiyle ve demoda döndürücüyü göstermez. İşte bunu yapmanın bir yolu olmadan mast-composite daha fazla tarayıcı desteği için.

Senin için bir tane daha var:

Bunun için bir kullanıyorum background-color rengi kontrol etmek ve kullanmak için mask ve mask-composite son şekli oluşturmak için:

Bitirmeden önce, bir süre önce yaptığım birkaç dönen yükleyici daha var. Farklı tekniklere güveniyorum ama yine de gradyanlar, maskeler, sözde eleman vb. kullanıyorum. Aynı anda her birinin mantığını çözmek ve yeni numaralar öğrenmek iyi bir egzersiz olabilir. Bu, onlar hakkında herhangi bir sorunuz varsa, yorum bölümünün aşağıda olduğunu söyledi.

Tamamlayan

Bakın, CSS'de tek bir div, birkaç gradyan, sözde öğeler ve değişkenler dışında hiçbir şeyle yapabileceğimiz çok şey var. Bir sürü farklı döner yükleyici yaratmışız gibi görünüyor, ancak hepsi küçük değişikliklerle temelde aynı şey.

Bu sadece başlangıç. Bu seride, CSS yükleyiciler oluşturmak için daha fazla fikir ve gelişmiş konsepte bakacağız.

---

Tek Elemanlı Yükleyiciler: Döndürücü 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-spinner/