Cara Membuat Progress Bar Upload Photo di W3.CSS

Gunakan syukur ketika kamu dicintai, dan gunakan sabar ketika kamu dibenci. Jangan ada sesal, jangan ada sebal. Kali ini saya akan membahas tentang bagaimana Cara Membuat Progress Bar Upload Photo di W3.CSS.

Progress Bar yang akan kita buat ini hanyalah tampilan ya teman-teman, tidak dengan fungsi Upload Photo nya teman-teman hahaha. Apa masih di antara kalian yang belum mengerti apa itu Progress Bar? Progress Bar adalah kolom persen yang berjalan untuk memberitahu sudah sukses atau belum fungsi yang kita mau.
Oke langsung saja kita praktekkan ya teman-teman. Berikut Cara Membuat Progress Bar Upload Photo di W3.CSS.

Seperti biasa, siapkan file index.html nya terlebih dahulu.

Kemudian, isi di bagian <head> link untuk menghubungkan HTML kita dengan library dari W3.CSS nya.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah,

<body class="w3-container">

<h2>Dynamic Progress Bar with Labels</h2>
<p>Label outside of the progress bar:</p>

<div class="w3-progress-container">
  <div id="myBar" class="w3-progressbar w3-green" style="width:0%">
  </div>
</div>

<p id="myP">Added <span id="demo">0</span> of 10 photos</p>

<button class="w3-btn w3-dark-grey" onclick="move();this.disabled='true'">Upload Photos</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 50);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById("myP").className = "w3-text-green w3-animate-opacity";
      document.getElementById("myP").innerHTML = "Successfully uploaded 10 photos!";
    } else {
      width++;
      elem.style.width = width + '%';
      var num = width * 1 / 10;
      num = num.toFixed(0)
      document.getElementById("demo").innerHTML = num;
    }
  }
}
</script>

</body>

Bagaimana teman-teman? cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Progress Bar Upload Photo di W3.CSS.

Semoga bermanfaat, terima kasih