Sadece CSS ile Loading Animasyonu

CSS3‘ün animasyon desteği, önceleri GIF ve SWF gibi formatlarda hazırladığımız loading tasarımlarını birkaç satır kod ile yapılabilir kılıyor. Animasyon efektlerinin infinite (sonsuz) desteği sayesinde de bu küçük tasarımları loop (döngü) halinde kullanabiliyoruz.

Bu dersimizde sadece CSS ile şık bir loading animasyonu hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS ile Loading

İlk olarak yapmamız gereken 3 adet dönen topu ve onları çevreleyen yine dönen wrapperi tasarıma dahil etmek. HTML kodlarımız ile başlayalım.

HTML Kodları

Bir çerçeveye ve onun içerisinde dönen kırmızı, mavi ve yeşil topa ihtiyacımız olacak :

<div class="cerceve">
  <div class="top kirmizi"></div>
  <div class="top yesil"></div>
  <div class="top mavi"></div>
</div>

HTML ile işimiz bu kadar. Sırada CSS kodlarımız var.

CSS Kodları

İlk olarak çerçevemizin boyutunu ve dönüş animasyonunu belirleyelim. Bu yapı için 2 tip animasyona ihtiyacımız var. Bunları Animasyon1 ve Animasyon2 olarak isimlendireceğiz.

.cerceve
{
  width:100px; 
  height:100px;
  -webkit-animation:Animasyon2 1400ms infinite;
  -moz-animation:Animasyon2 1400ms infinite;
  -ms-animation:Animasyon2 1400ms infinite;
  animation:Animasyon2 1400ms infinite;
}

Şimdi tüm toplar için geçerli olacak özellikleri belirleyelim: Boyutlar, pozisyon, radius değeri, ve animatif özellikler gibi…

.top
{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  -webkit-animation:Animasyon1 1400ms infinite ease;
  -moz-animation:Animasyon1 1400ms infinite ease;
  -ms-animation:Animasyon1 1400ms infinite ease;
  animation:Animasyon1 1400ms infinite ease;
}

Şimdi de renklerini ve ekranda görünecekleri yerleri belirleyelim.

.kirmizi
{
  background-color:#c9302c;
  top:0; left:0;
}
.yesil
{
  background-color:#449d44;
  top:0; left:50px;
}
.mavi
{
  background-color:#428bca;
  top:50px; left:25px;
}

Toplara uygulayacağımız genel animasyonu, yani Animasyon1‘i hazırlayalım.

@-webkit-keyframes Animasyon1
{
  0%{ position: absolute;}
  50%{top:25px; left:25px; position: absolute;opacity:0.5;}
  100%{ position: absolute;}
}
@-moz-keyframes Animasyon1
{
  0%{ position: absolute;}
  50%{top:25px; left:25px; position: absolute;opacity:0.5;}
  100%{ position: absolute;}
}
@-ms-keyframes Animasyon1
{
  0%{ position: absolute;}
  50%{top:12px; left:12px; position: absolute;opacity:0.5;}
  100%{ position: absolute;}
}
@keyframes Animasyon1
{
  0%{ position: absolute;}
  50%{top:25px; left:25px; position: absolute;opacity:0.5;}
  100%{ position: absolute;}
}

Çerçeveye uygulayacağımız animasyonu, yani Animasyon2‘yi hazırlayalım.

@-webkit-keyframes Animasyon2
{
  0%{-webkit-transform:rotate(0deg) scale(1);}
  50%{-webkit-transform:rotate(360deg) scale(1.2);}
  100%{-webkit-transform:rotate(720deg) scale(1);}
}
@-moz-keyframes Animasyon2
{
  0%{-moz-transform:rotate(0deg) scale(1);}
  50%{-moz-transform:rotate(360deg) scale(1.2);}
  100%{-moz-transform:rotate(720deg) scale(1);}
}
@-ms-keyframes Animasyon2
{
  0%{-ms-transform:rotate(0deg) scale(1);}
  50%{-ms-transform:rotate(360deg) scale(1.2);}
  100%{-ms-transform:rotate(720deg) scale(1);}
}
@keyframes Animasyon2
{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(360deg) scale(1.2);}
  100%{transform:rotate(720deg) scale(1);}
}