(Turkish) SESLENDİRME SANATÇILARI VOİCEBROS’TA TOPLANDI!

(Turkish) Android Yazılım Uzmanlığı

(Turkish) Çağrı Merkezleri Derneği’nin Yeni Dönem Yönetim Kurulu Başkanı Rengin Ağılönü Oldu

(Turkish) Yüzde yüz Türk girişimi Getir’den Yemeğini Sıcak Sevenlere Çözüm GetirYemek Hizmete Açıldı

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

  • Web Elements
  • Savaş Dersim Çelik
  • Sunday December 18th, 2016
  • 2,025 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