Mr. Techie Web Site Tasarımı

Level 2.0 Web Site Tasarımı

Health Care Web Site Tasarımı

Animals & Pets Web Site Tasarımı

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

Hazır Site Bileşenleri Pazar Aralık 18th, 2016
611 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

Salı Ocak 17th, 2017
1.649 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
656 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.388 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.686 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

Cumartesi Aralık 24th, 2016
484 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
563 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
582 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
654 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

Cuma Aralık 9th, 2016
528 Görüntülenme
Bunlar da var!
Gerçek Bir Kitap Kurduysanız Mutlaka Yaptığınız 16 Tuhaf Şey

Gerçek Bir Kitap Kurduysanız Mutlaka Yaptığınız 16 Tuhaf Şey

Pazartesi Mayıs 23rd, 2016
229 Görüntülenme
Kesin Almak İsteyeceğiniz 23 İlginç Ürün

Kesin Almak İsteyeceğiniz 23 İlginç Ürün

Çarşamba Nisan 27th, 2016
356 Görüntülenme
Düğün Dernek 2 Sünnet – Fragman [Video]

Düğün Dernek 2 Sünnet – Fragman [Video]

Çarşamba Kasım 11th, 2015
244 Görüntülenme
Xperia Z3+a güncelleme geldi, ısınma sorunu çözüldü mü?

Xperia Z3+a güncelleme geldi, ısınma sorunu çözüldü mü?

Pazar Temmuz 5th, 2015
303 Görüntülenme