Cara Menampilkan Progressbar Automatis Menggunakan W3c Css

Progress bar atau bisa kita lihat dengan persentasi penilaian kinerja dengan disimulasikan dengan Bahasa pemrogramman ini sangat menarik sekali yah untuk kita ebagai pemula mempelajari system ini, system ini sangat bagus sekali dan system inipun semakin memudahkan pekerjaan manusia dalam menilai kepintaran seseorang atau kepribadiannya, secara singkat dan cepat, nah pada pemabahasan kali ini saya akan membahas tentang Bagaimana Cara Menampilkan Progressbar Automatis Menggunakan W3c Css,

caranya sangat mudah yah, teman-teman bisa salinkan scriptnya dibawah sini .

<div class="w3-container" style="margin-top: 60px">


  <div class="w3-light-grey">
    <div id="myBar" class="w3-container w3-blue" style="height:24px;width:1%"></div>
    </div>

    <p id="demo">1%</p>

    <button class="w3-button w3-blue" onclick="move()">Progress</button> 
  </div>

<script>
  function move() {
    var elem = document.getElementById("myBar");   
    var width = 20;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++; 
        elem.style.width = width + '%'; 
        document.getElementById("demo").innerHTML = width * 1  + '%';
      }
    }
  }
</script>

Jika sudah disave dan jalankan, ckukup mudah bukan? Sekian tutorial tentang Bagaimana Cara Menampilkan Progressbar Automatis Menggunakan W3c Css, sampai bertemu diartikel selanjutnya dan sampai jumpa.

DEMO

#KeepLaern

#IsmetMA