Huawei Mate 10, QHD Ekran, Çift Leica Kamera ile Geliyor

Galaxy A5 (2018) ve A7 (2018) Modellerinde Çift Ön Kamera Mevcut

Huawei Mate 10 Etkinliğini Canlı Olarak Buradan İzleyebilirsiniz

Sony Xperia XZ1 ve XZ1 Compact ilk güncellemelerini aldı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Pazar Aralık 18th, 2016
  • 921 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

İlerleme çubuğu çoğu zaman download işlemlerimizde karşımıza çıkan durumlardan bir tanesidir. Download işleminin o anda ki durumunu bize yansıtır. Bizlerde kendi sitelerimizde ilerleme çubuğu ( Progress Bar ) kullanmak istersek aşağıda ki kodları kullanarak kendimize gçre bir Progress Bar yapabiliriz.

Gerekli kodlara konu içerisinden ve örnek demosuna konu altında yer alan demo butonuna tıklayarak göz atabilirsiniz.

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  + '%';
    }
  }
}

 

Yorumlar

Henüz hiç yorum yapılmamış.

Benzer İçerikler