Merhabalar,

Bu yazımda bazı blog, haber sitelerinde karşılaşabileceğiniz olan okumaya göre artıp, azalan ilerleme çubuğu (progress bar) yapımından bahsedeceğim. HTML, CSS, JavaScript üçlüsünü kullanarak bu işlemi gerçekleştireceğiz.

Yine sayfanın tüm yüksekliğini ölçme, yüzde kaçında olduğu gibi tüm event işlemlerini JavaScript tarafında yapacağız.

Temel yapıdan başlayarak HTML'de çubuğu göstereceğimiz bir div oluşturalım:

<div id="cubuk"></div>

İlerleme çubuğumuzu göstereceğimiz div elementini HTML tarafına yerleştirdik. Şimdi sıra geldi bu ilerleme çubuğunun tasarımına.

Güzel görünmek her ilerleme çubuğunun hakkı :)

#cubuk {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  z-index: 1000;
  background: #a2214d;
}

Sayfanın en üstüne sabit, 5px yüksekliğe sahip olacak şekilde özel bir arka plan rengi vererek çubuğumuzu yerleştirdik.

Şu anda hiçbir şey görünmeyecektir çünkü bir genişliği bulunmamaktadır. Bu yüzden JavaScript tarafına geçiyoruz:

function guncelle() {
  let cubuk = document.getElementById('cubuk'),
      elem = document.documentElement,
      yukseklik = elem.scrollHeight,
      docBody = document.body,
      scrollTop = elem['scrollTop'] || docBody['scrollTop'],
      scrollBottom = (elem['scrollHeight'] || docBody['scrollHeight']) - window.innerHeight,
      scrollPercent = scrollTop / scrollBottom * 100 + '%';

  cubuk.style.width = scrollPercent;
}

window.addEventListener('scroll', guncelle);

Yukarıda gördüğünüz gibi JavaScript ile çubuğun genişliği, scroll oranına göre ayarlanıyor. Her satırı yorumlarla açıklamaya çalıştım.

Bu özelliği yazı, haber veya blog paylaşımı yapan sitelerde rahatlıkla kullanabilirsiniz.

Umarım anlaşılır olmuştur ve işinize yarar.

Mutlu Kodlamalar :)