Css ile Loading Yapımı

Bu yazımızda Css ile nasıl loading animasyonu yapabiliriz onu öğreneceğiz. Bildiğiniz gibi bir sayfa yüklenirken veya bir işlemin gerçekleşmesini beklerken genelde loading animasyonları ile karşılaşırız. İşlem gerçekleştiğinde ise animasyon kaybolur.

Yaptığımız aslında bir div etiketi oluşturup animasyon olarak transform:rotate() değerini 0 deg’den 360 deg’e çıkarmak. Böylece oluşturduğumuz div sürekli olarak dönmüş olacak.

Örneğimizi incelediğinizde daha iyi anlaşılacaktır.

Css kodlarında özellikle border ve color değerlerinde değişiklikler yaparak daha farklı loading animasyonları geliştirebilirsiniz.

Loading Html Kodları

Loading Css Kodları

Loading Son Hali

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Html ve Css ile Pagination (Sayfalama Butonları) Yapımı 

Html ve Css ile Animasyonlu Arama Kutusu Yapımı

Yeni bir yazımda görüşmek üzere.

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +