ilerleme çubuğu

24 Nisan 2020by MeKWeb

JavaScript Progress Bar Yapımı

İlerleme çubuğu yani progress bar çoğu zaman seviye vb işlemlerde projemizde entegre edebilceğimiz veye bir ilerlemenin durumunu gösterebilceğimiz bir yapıdır. Şimdi bu yazımızda basit bir progress bar yapalım.

Html Kodlarımız

<h1>Progress Bar Yapımı - Webinyo.COM</h1>
<div id="myProgress">
  <div id="myBar">
    <div id="label">10%</div>
  </div>
</div>

CSS Kodlarımız

#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}
#myBar {
  position: absolute;
  width: 10%;
  height: 100%;
  background-color: #4CAF50;
}
#label {
  text-align: center;
  line-height: 30px;
  color: white;
}

Js Kodlarımız

function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}

Cs kodlarımızı düzenleyerek kendi renkli progress barınızı özelleştirebilirsiniz.