Css Zıplayan Yükleyici (Bouncing loader)

Merhaba arkadaşlar,

Bu gün sizlere css de çok merak edilen ve sağda solda aranan bouncing loader’ı yani zıplayan yükleyiciyi göstermek istiyorum.

Öncelikle demomuz:
https://codepen.io/anon/pen/VdZVEB

Sonrasında HTML kodumuz:

<div class="bouncing-loader">

<div></div>


<div></div>


<div></div>

</div>

ve daha sonrasında ise CSS kodumuz geliyor:

 
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}

 

Aslında bu kadar basit, hemen bir html oluşturun yukarıdaki html kodlarını yapıştırın,
css stillerinizi css dosyasından çekin ve içerisine yukarıdaki css kodlarınızı da yazın, sonuç bu kadar basit…
Şimdi gelelim mantığını anlamaya!
Not: 1remgenellikle 16px‘dir yani aslında standartta 16 px olarak görülmekte.

1. @keyframesöğenin opacity2B düzleminde değiştirildiği ve çevrildiği iki durumu olan bir animasyonu tanımlar transform: translateY().
2. .bouncing-loaderzıplayan yuvarlak halkaların ana class’ıdır.
3.  display: flexve justify-content: centerbunları merkezde konumlandırır.
4. .bouncing-loader > divdivEbeveynin üç çocuğunun stil sahibi olmasını hedefler . div  bir genişlik ve yüksekliğinin verilir 1remkullanılarak border-radius: 50%çevrelerin kenarlarını bükerek yuvarlak haline getirmek daha düz basit mantık.
5. margin: 3rem 0.2remHer bir dairenin, birbirlerine doğrudan temas etmeyecek şekilde bir üst / alt kenar boşluğu 3remve sol / sağ kenar boşluğuna sahip 0.2remolduğunu ve onların aralarındaki mesafeleri belirler.
6. animationçeşitli animasyon özellikler için bir kestirme bir özelliktir: animation-name, animation-duration, animation-iteration-count, animation-directionkullanılır. Daha fazlası için w3 den css animation özelliklerine bakabilirsiniz.
7. nth-child(n) Ebeveyninin nth çocuğu olan öğeyi hedefler.
8. animation-delaydivsırasıyla ikinci ve üçüncü olarak kullanılır, böylece her eleman aynı anda animasyonu başlatmaz.

Ve son olarakta tüm tarayıcıların desteklediğini görebilirsiniz (ie bile)
https://caniuse.com/#feat=css-animation

Kolay gelsin...

Benzer Konular:

Ekranı Kaplayan Reklam CSS ile Balon Yapımı (SCSS)