CSS ile Yükleniyor Animasyonu Yapımı

Merhaba arkadaşlar, Bu yazımda sizler için sadece CSS kullanılarak yapılmış olan Loading yani yükleniyor animasyonu yapmayı göstereceğim.Bazı sitelerde gezinirken belki rast gelmiş olabilirsiniz.Rast geleceğiniz bazı örnekler ise buradan bakabilirsiniz.

 

Öncelikle yapmamız gereken  “<div class=”sp sp-circle”></div>” ini html kodlarımız arasına ekliyoruz.Bu adımdan sonra ise CSS kodlarımızı ekleyeceğiz.

Animasyonumuzun ayarlarını aşağıdaki CSS ile yapabilirsiniz.Hayır sizin yaptığınız kalsın derseniz aşağıdakini CSS inize ekleyin.

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

Bu adımın hemen ardından animasyonumuzu faaliyete geçirmek kalıyor.Bunun içinse aşağıdaki kodları eklemeniz yeterli olacaktır.

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

Yapamadığınız takıldığınız yerlerde yardımcı olmaktan gurur duyarız.Farklı örnekler için ise tıklayınız.

Loading Facebook Comments ...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir