How To

Cara Membuat Progress Bar

Di bawah ini kita akan mempelajari cara membuat Progress Bar menggunakan JavaScript. Progress bar biasanya digunakan untuk membuat gambaran suatu proses dari suatu kinerja. Seperti ini : 

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #00BFFF;
}
</style>
<body>

<h1>Contoh JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button >var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}
</script>

</body>
</html>

Membuat Progress Bar

Langkah 1) Tambahkan HTML:
Contoh

<div id="myProgress">
  <div id="myBar"></div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #00BFFF;
}

Langkah 3) Tambahkan JavaScript:
Buat Progress Bar Dinamis (animasi) Menggunakan JavaScript:
Contoh

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

Tambahkan Label

Jika ingin menambahkan label untuk menunjukkan seberapa jauh pengguna dalam proses, tambahkan elemen baru di dalam (atau di luar) progress bar:

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color:  #00BFFF;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>

<h1>Contoh JavaScript Progress Bar Dengan Label</h1>

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

<br>
<button >

Langkah 1) Tambahkan HTML:
Contoh

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center; /* Untuk memusatkannya secara horizontal (jika mengingkannya) */  line-height: 30px; /* Untuk memusatkannya secara vertikal */  color: white;
}

Langkah 3) Tambahkan JavaScript:
Jika ingin memperbarui teks di dalam label secara dinamis ke nilai yang sama dengan lebar progress bar, tambahkan yang berikut ini:
Contoh

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width + "%";
      }
    }
  }
}

Hanifah Nurbaeti

Share
Tags: How Tojavascript