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.

Loading Gif Örnekleri – Yükleniyor Gif Örnekleri

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.

Yorum Yazın