CSS ile Loading.Gif Yapımı

Artık çoğu sitede karşımıza çıkan Yükleniyor (Loading) imajlarıyla sitelerin açılmasındaki zevksiz bekleyişi bir nebze olsun azaltan yapıyı AJAX kullanmadan gerçekleştirmenin yöntemi bu yazıda.

Örneğin web sitemizde bulunan resim galerisinde bulunan resimlerin yüklenmeleri esnasında meydana gelecek beklemeleri daha görsel hale getirebilmek için yazacağımız ufak still kodlarıyla bu işe başlayabiliriz.

.resim{
background-color: #FFFFFF;
background-image: url(loader.gif);
background-repeat: no-repeat;
background-position: center center;
}

şeklinde yazacağımız ufak CSS kodlarını ister bir CSS sayfasının içerisine, istersek de sayfamızın baş tarafında bulunan <head></head> etiketleri arasına oluşturacağımız <style></style> etiketleri arasına yazabiliriz.

Şimdi ise

<img class=”resim” src=”resim.jpg” alt=”Resim1″ width=”400″ height=”300″ />

şeklinde <img> nesnemize resim isimli sitil class’ımızı referans gösteriyoruz.

Daha sonra sayfamızı kaydedip ve test edebiliriz.

Unutmadan sitilimiz içerisinde bulunan background-image: url(loader.gif); satırda loader.gif yerine yükleniyor resmimizin yolunu düzeltmeliyiz.

Zevkimize göre online olarak loader.gif ler oluşturmak için buraya bakabilirsiniz.

Bir Cevap Yazın

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