CSS ile hazırlanmış loading animasyonu (spinner)

CSS ile hazırlanmış loading animasyonu (spinner)
62

Hazırlayacağınız projede “Yükleniyor” ibaresine ihtiyaç duyuyorsanız bu ihtiyacı gidermek içinde gif kullanmak istemiyorsanız bu örnek tam size göre. Harold Soto tarafından hazırlanmış bu örnekte 12 adet sadece css ile hazırlanmış loading animasyonu bulunmaktadır.

Diğer örnekleri görmek için

Tıklayın

[bilgi]Aşağıda paylaştığım örnek circle olarak işaretlenen spinner’dır.[/bilgi]

Nasıl Yapılır?

Html kodları ile başlayalım, sadece division ekliyoruz html kısmı bu kadar.

<div class="sp sp-circle"></div>

CSS kodlarına geçelim

İlk olarak animasyonumuzun nasıl görüneceğini ayarlayalım..

.sp {
 width: 32px;
 height: 32px;
 clear: both;
}
.sp-circle {
 border: 4px rgba(0, 0, 0, 0.25) solid;
 border-top: 4px black solid;
 border-radius: 50%;
 -webkit-animation: spCircRot .6s infinite linear;
 animation: spCircRot .6s infinite linear;
}

Son olarakta animasyonumu ekleyelim..

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

Yorum Yap