Merhabalar,
Siteniz yüklenme aşamasındayken yani henüz dosyalarınız yüklenirken daha tam yüklenmediği için kötü görünüm yerine loader (Yükleme Ekranı) kullanabilirsiniz. Bir çok sitede karşılaşmışsınızdır. Yükleniyor ikonu, gifi veya farklı animasyonlu simgeler koymuş oluyorlardır.
Söylediğim gibi bu hem kötü görünümü engellemek, hem de kullanıcılarınızı bekleme aşamasında oyalayacak güzel bir animasyonlu görünüm sunmak amacıyla kullanabilirsiniz.
İyi de ben nasıl bulup yapacağım bu gif veya simgeleri nasıl özelleştireceğim diye düşünüyorsanız bu işlemi kolaylaştırmak için sunulan bir web sitesinden bahsedeceğim. Loading.io bizim için bu işlemi oldukça fazla kolaylaştırmış ve özelleştirme imkanı sağlamıştır.
Verdiğim linkten adrese giderek, kendi simgenizi seçebilir, simgenin;
- Renk, Çoklu Renk,
- Genişlik, Yükseklik,
- Kenar kalınlığı, Ovalleştirme,
- Büyüklük,
- Animasyon Hızı,
- Arka plan Rengi veya Transparanlık
gibi bir çok daha sayamayacağım özelliklerini ayarlayabilirsiniz. Ayrıca oluşturduğunuz simgenin dosyasını Gif, Svg, Png, Css .. gibi bir çok uzantıda ücretsiz lisansla indirebiliyorsunuz.
Bu indirdiğimiz dosyayı hızlıca loader olarak sitemize entegre etme işlemine geçelim.
<div id="loading">
<img src="loader.gif" alt="Yükleniyor..." />
</div> id üzerinden JavaScript ve Css ile tanımlamalar yapacağız bu yüzden div’e bir id verdik ve içine indirdiğimiz gif dosyasının yolunu yazdık. Sırada Css ile görünümünü ayarlamak var.
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items:center;
justify-content:center;
background-color: #fff;
z-index: 999
} Css ile Sabit Konumlandırma yapıp flex sistemi ile ekleyeceğimiz loader simgesini yatay ve dikey olarak ortalayıp, beyaz arkaplan ve z-index ile öncelik verdik.
Şimdi sıra sayfa yüklenince bu loading id’ li divi gizlemek olacak. Yolumuz bu aşamada JavaScript’e düşüyor;
<script>
window.addEventListener('load', fg_load)
function fg_load() {
document.getElementById('loading').style.display = 'none'
}
</script>Dosyalar yüklendiğinde JavaScript ile kontrol edip çalışan fonksiyonun içine id‘ si loading olan elementi gizlemesini belirtmemiz yeterli olacaktır.
Simgesini oluşturup indirmekten, siteye entegresine kadar loader yapımını anlatmaya çalıştım. Umarım anlaşılır olmuştur ve işinize yarar.
Mutlu Kodlamalar 🙂
