Web Tasarımı ve Sunucu Yönetimi

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.

Etiketler
Daha Fazla Göster

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

Bir cevap yazın

Başa dön tuşu
Kapalı
Kapalı