Progress Bar Bootstrap & jQuery

Progress Bar Bootstrap & jQuery

Pada artikel kali ini akan membahas seputar progress bar dengan menggunakan Bootstrap dan jQuery.

Pembahasan terkait dengan progress bar dengan menggunakan JavaScript macamnya sangat beragam, pada tulisan kali ini akan diperlihatkan secara sederhana, bagaimana cara mengaktifkan fitur progress bar yang ada di Bootstrap dengan menggunakan jQuery.

file index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Progress Bar with JavaScript</title>
    <style type="text/css">
      body{
        padding: 20px;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
      </div>
    </div>








    <!-- jQuery Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

    -->


    <script type="text/javascript">
      var prosesBar = $('.progress-bar');
      var prosesAngka = 0;

      setInterval(function(){
        prosesAngka++;
        prosesBar.css('width', prosesAngka + '%');
        prosesBar.attr('aria-valuenow', prosesAngka);
      }, 100);
    </script>


  </body>
</html>

kode skrip diatas disana secara keseluruhan sudah terdapat skrip css, dan template default dari Bootstrap serta disini untuk fitur interaktif disini menggunakan jQuery libray, jadi pastikan unduh untuk file jQuery tersebut.

Progress bar yang dibuat untuk artikel yang sedang dibuat tidak menggunakan event, jadi otomatis pada saat halaman web dibuka maka akan dijalankan, silahkan kalian coba dengan menambahkan event atau perintah lainnya.

Hasil jadi dapat langsung dilihat disini: