Progress Bar jQuery Bootstrap

Create progress bar with jQuery and Bootstrap 5

by Miftah Faroq

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<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>

CSS

body{
        padding: 20px;
      }

JavaScript

var prosesBar = $('.progress-bar');
      var prosesAngka = 0;

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