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.
<pre><code class="language-html">
<div id="loading">
<img src="loader.gif" alt="Yükleniyor..." />
</div>
</code></pre>
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.
<pre><code class="language-css">
#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;
}
</code></pre>
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;
<pre><code class="language-html">
<script>
window.addEventListener('load', fg_load);
function fg_load() {
document.getElementById('loading').style.display = 'none';
}
</script>
</code></pre>
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 :)
