CSS ile Facebook Loading (Spinner)

Facebook‘un kendine has tasarımının en dikkat çekici öğelerinden biri de ‘yükleniyor’ animasyonları. Spinner ve loader diye de tanımlanan bu öğeler CSS ile kolaylıkla hazırlanabilir.

Bu makalemizde klasik bir listeleme (ul) yapısını Facebook’un spinner öğesine çevireceğiz ve bütün bu işlemi sadece birkaç satır CSS kodu ile yapacağız.

ÖRNEĞİ GÖRÜNTÜLE

Facebook Spinner

Facebook, loading öğesinde 3 adet dikdörtgeni hem pozisyonel hem de ölçüsel olarak stilize ederek bir animasyon döngüsü oluşturuyor. Bu tip kısa süreli ve loop yapısındaki görseller de kullanıcıda yükleme işlemi olduğu izlenimi veriyor. Yani işin kullanıcı deneyimi tarafında Facebook’un yaptığı bu tasarım gayet başarılı.

Peki bu spinner nasıl hazırlanır?

HTML Kodları

Sıradan bir ul li yapısı bizim için yeterli olacaktır. Facebook’un yaptığı gibi 3 dikdörtgeni animasyona dahil edeceğimiz için 3 adet li kullanalım.

<ul class="yukleniyor">
	<li></li>
	<li></li>
	<li></li>
</ul>

Şimdi bu öğeyi CSS ile tasarlayalım.

CSS Kodları

İlk olarak ul üzerinden ilerleyelim. Öğeyi tablo yapısına büründürerek çerçevenin sadece ihtiyaç alanı kadar genişlemesini sağlayalım. Beraberinde de list-style-type tanımı ile li elemanlarındaki sıralama görsellerini yok edelim.

ul.yukleniyor{
    display:table;
    list-style-type:none;
}

Şimdi herbir li öğesi için boyutlandırma ve animasyon atama işlemlerini yapalım.

ul.yukleniyor li{
    height: 50px;
    width: 15px;
    margin:3px; 
    display: inline-block;
    -webkit-animation: fbAnimasyon 1s linear infinite;
    -moz-animation: fbAnimasyon 1s linear infinite;
    animation: fbAnimasyon 1s linear infinite;
}

Sonra da birinci, ikinci ve üçüncü dikdörtgen için sahneye giriş ve çıkış sürelerini belirtelim. Beraberinde reklendirme işlemini de yapalım.

ul.yukleniyor li:nth-child(1){
    -webkit-animation-delay:.4s;
    -moz-animation-delay:.4s;
    animation-delay:.4s;
    background-color: #d6e2ef;
    box-shadow: inset 0 0 0 1px rgba(20, 60, 110, 0.1);
}
ul.yukleniyor li:nth-child(2){
    -webkit-animation-delay:.5s;
    -moz-animation-delay:.5s;
    animation-delay:.5s;
    background-color: #5a8abe;
    box-shadow: inset 0 0 0 1px rgba(20, 60, 110, 0.4);
}
ul.yukleniyor li:nth-child(3){
    -webkit-animation-delay:.65s;
    -moz-animation-delay:.65s;
    animation-delay:.65s;
    background-color: #3671b0;
    box-shadow: inset 0 0 0 1px rgba(20, 60, 110, 0.7);
}

Son olarak da cross-browser yapıdaki animasyonumuzu kodlarımıza ekleyelim.

@-webkit-keyframes fbAnimasyon{
     0%{
          -webkit-transform:scale(1.2);
          opacity:1
     }
     100%{
          -webkit-transform:scale(0.7);
          opacity:0.1
     }
}
@-moz-keyframes fbAnimasyon{
     0%{
          -moz-transform:scale(1.2);
          opacity:1
     }
     100%{
          -moz-transform:scale(0.7);
          opacity:0.1
     }
}
@keyframes fbAnimasyon{
     0%{
          transform:scale(1.2);
          opacity:1
     }
     100%{
          transform:scale(0.7);
          opacity:0.1
     }
}