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?
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);}
}
Spinners:
Döndürücü/yükleyici oluşturmak için spinner-border sınıfı kullanılır:
Kodları:
<div class="spinner-border"></div>
Renkli spinners:
Döndürücülere renk eklemek için text color utilites kullanılır:
Kodları:
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
Büyüyen Spinners:
Döndürücülerin/yükleyicilerin dönmek yerine büyümesi için .spinner-grow sınıfı kullanılır:
Kodları:
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
Döndürücü Boyutları Ayarlama:
Daha küçük bir döndürücü oluşturmak için .spinner-border-sm veya .spinner-grow-sm kullanılır:
Kodlar:
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
Düğmeli döndürücüler:
Metin içeren veya içermeyen bir düğmeye döndürücü ekleyebiliriz:
Kodlar:
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>