Bootstrap Progress Bar Progression

Bootstrap 4 - Progress Bar Progression

This codesnippet works for me:

$(".nextStep").click(function() {
    $("#progressBar")
        .css({"width": "90%"})
       .setAttribute("aria-valuenow", 90);
});

Here is your example in a codepen: https://codepen.io/AndTheGodsMadeLove/pen/vYBGzeQ

Bootstrap progress bar progression

Prefer using JQuery

$(".bar").css("width", "50%");

or in Javascript

var bars = document.getElementsByClassName("bar");
bars[0].style.width = "50%";

Bootstrap progress bar progression using setTimeout

Your code had multiple problems. The most serious is the while(w!=100) loop, which probably isn't working like you might think. It generates +75000 independent timer events that quickly overwhelm the browser.

A better solution is to use one central timer created with setInterval() as shown in the code snippet below. Clicking the pay button starts the timer. It increments the progress bar and then stops at 100%.

Additionally, you need to prevent the user from clicking on the button multiple times. In the snippet, the button is disabled until the payment timer completes. The code also makes use of the Bootstrap UI (button) and jQuery, all of which are typically used together.

Run the snippet to try

$('#pay').click(function() {

  var timerId, percent;

  // reset progress bar
  percent = 0;
  $('#pay').attr('disabled', true);
  $('#load').css('width', '0px');
  $('#load').addClass('progress-bar-striped active');

  timerId = setInterval(function() {

    // increment progress bar
    percent += 5;
    $('#load').css('width', percent + '%');
    $('#load').html(percent + '%');

    // complete
    if (percent >= 100) {
      clearInterval(timerId);
      $('#pay').attr('disabled', false);
      $('#load').removeClass('progress-bar-striped active');
      $('#load').html('payment complete');

      // do more ...

    }

  }, 200);

});

/*

function inc() {
  var w = parseInt(document.getElementById("load").style.width);
  w = w + 10;
  document.getElementById("load").style.width = w + '%';
  //console.log('inc: w=' + w );

}
var c=0;
function pay() {
  var w = parseInt(document.getElementById("load").style.width);
  while (w != 100) {
    c++;  // 75k times!!!
    console.info( 'w=' + w + ', c=' + c);
    setTimeout(inc, 2000);
    console.log( 'timer' );
    w = parseInt(document.getElementById("load").style.width);
  }

}

*/

/*

function pay() {

var timerId = setInterval(function() {
  
  var text, percent = parseInt( window.progress1.innerHTML );
  
  if (percent < 100) {
    percent = (percent + 10) + '%';        
    text = percent;
  }
  else {
      clearInterval( timerId );
      percent = '100%';
      text = 'Payment complete';
  }
  window.progress1.innerHTML = text;
  window.progress1.style.width = percent;
  
}, 500);
  
}

*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button type="button" id="pay" class="btn btn-primary" autocomplete="off" style="width:8em">
  Pay
</button>

<div class="progress" id="submit_progress" style="width:50%">
  <div class="progress-bar progress-bar-success " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
    0%
  </div>
</div>

How to update bootstrap progress bar.

Use attribute and style binding:

<div class="progress">
    <div id="trainingProgressBar" class="progress-bar 
        progress-bar-success progress-bar-striped active" 
        role="progressbar" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        [attr.aria-valuenow]="trainingProgress" 
        [style.width.%]="trainingProgress">
        {{trainingProgress}}% Complete
    </div>
</div>

Here the PLUNKER

---

Related Topics