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: 1rem
genellikle 16px
‘dir yani aslında standartta 16 px olarak görülmekte.
@keyframes
öğeninopacity
2B düzleminde değiştirildiği ve çevrildiği iki durumu olan bir animasyonu tanımlartransform: translateY()
..bouncing-loader
zıplayan yuvarlak halkaların ana class’ıdır.-
display: flex
vejustify-content: center
bunları merkezde konumlandırır. .bouncing-loader > div
div
Ebeveynin üç çocuğunun stil sahibi olmasını hedefler .div
bir genişlik ve yüksekliğinin verilir1rem
kullanılarakborder-radius: 50%
çevrelerin kenarlarını bükerek yuvarlak haline getirmek daha düz basit mantık.margin: 3rem 0.2rem
Her bir dairenin, birbirlerine doğrudan temas etmeyecek şekilde bir üst / alt kenar boşluğu3rem
ve sol / sağ kenar boşluğuna sahip0.2rem
olduğunu ve onların aralarındaki mesafeleri belirler.animation
çeşitli animasyon özellikler için bir kestirme bir özelliktir:animation-name
,animation-duration
,animation-iteration-count
,animation-direction
kullanılır. Daha fazlası için w3 den css animation özelliklerine bakabilirsiniz.nth-child(n)
Ebeveyninin nth çocuğu olan öğeyi hedefler.animation-delay
div
sı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...