info@kodmek.com
Kodmek
  • Anasayfa
  • Blog
  • Araçlar
Kodmek
  • Anasayfa
  • Blog
  • Araçlar
  • Anasayfa
  • Blog
  • Araçlar
  • Anasayfa
  • Blog
  • Araçlar
Blog
Home Web JavaScript Progress Bar Yapımı
Web

JavaScript Progress Bar Yapımı

MeK 24 Nisan 2020 0 Comments

İlerleme çubuğu yani progress bar çoğu zaman seviye vb işlemlerde projemizde entegre edebilceğimiz veye bir ilerlemenin durumunu gösterebilceğimiz bir yapıdır. Şimdi bu yazımızda basit bir progress bar yapalım.

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  + '%';
    }
  }
}

Cs kodlarımızı düzenleyerek kendi renkli progress barınızı özelleştirebilirsiniz.

ilerleme çubuğu
62
600 Views
AboutEnes KALE
Android'de Özel Yazı Font Kullanma - DelphiPrevAndroid'de Özel Yazı Font Kullanma - Delphi14 Nisan 2020
Cyberpanel Yeniden Başlatma Komutu6 Aralık 2020Cyberpanel Yeniden Başlatma KomutuNext

Bir yanıt yazın Yanıtı iptal et

Yorum yapabilmek için oturum açmalısınız.

New Comments
  • SP Flash Tool için veysel25
  • DZ09 Smartwatch Saat modelleri ekleme için MeK
  • DZ09 Smartwatch Saat modelleri ekleme için furkan öztoprak
  • STM32F103 1602A LCD Bağlantısı için MeK

Kodmek güncel teknoloji ve programlama platformu
Bültene kayıt ol

[mc4wp_form id="357"]

Kullanım koşulları | Gizlilik Çevreve politikası

Copyright © 2023 kodmek.com. All Rights Reserved.