CSS ile Loading Animasyonu (Spinner)

Dijital olan ve elektronik bir cihaz üzerinden çalışan her türden proje kısa da olsa “Yükleniyor…” animasyonuna ihtiyaç duyar. İşin web tarafında da CSS3‘ün gelişiyle GIF ve SWF animasyonlar rafa kaldırılarak yerlerini sadece CSS ile işleyen tasarımlar aldı. Ancak bu CSS kodları da bazen o kadar detaylı ve uzun oluyor ki sıradan bir GIF’den daha ağır çalışıyor.

Bu dersimizde sadece bir div ve birkaç satır CSS kodu ile dönen bir topaç (loading animasyonu) oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

Günümüz CSS ve HTML teknolojisi ile tasarlayabileceğiniz en basit yükleniyor animasyonunu yapmaya hazır mısınız? HTML kodlarımız ile başlayalım.

HTML Kodları

Sadece bir division ekliyoruz.

<div class="spinner"></div>

Bir şeyleri atlamadınız. HTML kodlarımız sadece bu kadar.

CSS Kodları

İlk olarak spinner öğesinin neye benzeyeceğini, ne büyüklükte olacağını ve dönüş hızını ayarlayalım.

.spinner{
  width: 25px;
  height: 25px;
  border-radius: 100%;
  animation-name: spinner .7s linear infinite;
  -webkit-animation: spinner .7s linear  infinite;
  -moz-animation: spinner .7s linear  infinite; 
}

Bir kenarı 25 piksel olan bir kare hazırladık. Border-radius 100% tanımı ile de her kenarını yuvarladık. Sonrasında 7 saniyede çizgisel ve sonsuz olarak sürdüreceği spinner isimli bir animasyon ile eşleştirdik. Sırada stil detaylarımız ve pozisyonlamamız var.

.spinner:after{
  position: absolute;
  content:'';
  width: 25px;
  height: 25px;
  border-radius: 100%;
  border-top:3px solid tomato;
  border-bottom:3px solid tomato;
  border-left:3px solid tomato;
  border-right:3px solid transparent;
  top: -3px;
  left: -3px;
}

Ve son olarak spinner isimli animasyonu ekleyelim.

@keyframes spinner{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

@-webkit-keyframes spinner{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

@-moz-keyframes spinner{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

Bu kadar!