Turkcell ve Yandex, Yerli Arama Motoru ‘Yaani’ İçin Ortak Oldular

Hindistan’da Yenilenmiş Galaxy Note 7 Satılacağı İddiaları Yalanlandı

Apple, merakla beklenen yeni kampüsü Apple Park’ı Nisan’da açıyor

Microsoft, Windows 10’un ikinci büyük güncellemesinin de 2017 yılında geleceğini doğruladı

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

Hazır Site Bileşenleri 18 Aralık 2016
474 Görüntülenme

İ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ış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
331 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
315 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
316 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
337 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
300 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
337 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
396 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
436 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
459 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
369 Görüntülenme
Bunlar da var!
Diliyle Durdurdu [Video]

Diliyle Durdurdu [Video]

1 Şubat 2016
152 Görüntülenme
Büyük ve Hızlı Motorlu Testereler

Büyük ve Hızlı Motorlu Testereler

23 Nisan 2016
149 Görüntülenme
Üzerlerinden 239 kol saati çıktı

Üzerlerinden 239 kol saati çıktı

22 Haziran 2015
124 Görüntülenme
Apple News artık herkese açık

Apple News artık herkese açık

16 Mart 2016
141 Görüntülenme