Filtreli Arama Tablo Yapımı
Önceki Makale
- Anasayfa
- Hazır Site Bileşenleri
- JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı
Savaş Dersim Çelik
|
Pazar Aralık 18th, 2016
|
1 Yorum
|
3.945 Görüntülenme
|
1 Like
İ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 + '%'; } } }
Etiketler
css İlerleme Çubuğu css Progress Bar javascript Progress Bar html İlerleme Çubuğu html Progress Bar İlerleme Çubuğu demo İlerleme Çubuğu kodları İlerleme Çubuğu örnek İlerleme Çubuğu yapımı javascript İlerleme Çubuğu progress bar Progress Bar demo Progress Bar example Progress Bar html Progress Bar yapımı-
-
Wordpress Giriş Paneli Gizleme Eklentisi | WPS Hide Login Sonraki Makale
Konu İle İlgili Soru, Görüş ve Öneriler
duzmuh
harika bilgi için teşekkürler savaşcım kolay gelsin 😀