Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

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

Hazır Site Bileşenleri 18 Aralık 2016
539 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
544 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
436 Görüntülenme
Bunlar da var!
Pilotların Lodosla İmtihanı [Video]

Pilotların Lodosla İmtihanı [Video]

21 Kasım 2015
156 Görüntülenme
Mirror’s Edge Catalyst Yine Ertelendi

Mirror’s Edge Catalyst Yine Ertelendi

25 Nisan 2016
232 Görüntülenme
Merkür, ‘Görünmez Boya’ ile Kaplı

Merkür, ‘Görünmez Boya’ ile Kaplı

6 Nisan 2015
160 Görüntülenme