İlerleme çubuğu

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.

MeK

Pamukkale Üniversitesi Elektrik Elektronik Mühendisliği ni 2018 yılında bitirdim. 2018 yılında Yüksek Lisansa Karatekin Üniversitesi Elektrik Elektronik Mühendisliğine başladım. Programlamayı seviyorum Delphi, C# , C , PHP dillerine hakimim ARM ile uğraşıyorum bunların yanında web tasarım ve sunucu yönetimi ile hobi olarak uğraşıyorum. Sizlere Kodmek sayfamda hakim olduğum diller ve öğrenmek istediğim konularda yardımcı olmaya çalışacağım