Bootstrap Yükleme Animasyonları ve Spinners

HAZIRLAYAN: DENİZ YAZICI

Spinners nedir ve kullanım amacı:

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ı.

Nasıl yapılır?

HTML Kodları

Sadece bir division ekliyoruz.

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

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);}

 }