I'm using Bootstrap Progress Bar (PB) in showing a process progress. My process is an AJAX process. While ideally, the background task should report to the progress bar every now and then the percentage status of the background process to show real-time progress indication ("1 out of 100 tasks pleted"... "99 out of 100 tasks pleted"), the background task is limited in sending only one status report. And that is at the end of the AJAX call.

So I've decided to do a looping PB instead. So if it reaches 100%, it will loop again to 0%, until the AJAX task finishes and will end the loop. The problem with Bootstrap is the animation between 100% to 0%.

In my jfiddle, when the PB reaches 100%, it should immediately be 0%. But instead of immediately flashing to 0%, it animates the process. Therefore only the first loop goes 0% to 100%, the succeeding loops goes to 25% to 100%, never going 0% again.

I though the animation is because of the .active class of the PB. So I tried to remove that in between 100% to 1%:

var increment = function(value) {
    if(x > 100) {
        x = 0;
        progressBar.parent().removeClass("active");
    }
    else if(x == 1) {
        progressBar.parent().addClass("active");
    }

    progressBar
        .attr('aria-valuenow', value % 100)
        .css('width', (value % 100) + '%')
        .text("");
};

Although it still doesn't work. How can I disable that transition just on this particular PB? I can set the timeout to 1 second, and this problem will go away although I think there are better answers than that.

I'm using Bootstrap Progress Bar (PB) in showing a process progress. My process is an AJAX process. While ideally, the background task should report to the progress bar every now and then the percentage status of the background process to show real-time progress indication ("1 out of 100 tasks pleted"... "99 out of 100 tasks pleted"), the background task is limited in sending only one status report. And that is at the end of the AJAX call.

So I've decided to do a looping PB instead. So if it reaches 100%, it will loop again to 0%, until the AJAX task finishes and will end the loop. The problem with Bootstrap is the animation between 100% to 0%.

In my jfiddle, when the PB reaches 100%, it should immediately be 0%. But instead of immediately flashing to 0%, it animates the process. Therefore only the first loop goes 0% to 100%, the succeeding loops goes to 25% to 100%, never going 0% again.

I though the animation is because of the .active class of the PB. So I tried to remove that in between 100% to 1%:

var increment = function(value) {
    if(x > 100) {
        x = 0;
        progressBar.parent().removeClass("active");
    }
    else if(x == 1) {
        progressBar.parent().addClass("active");
    }

    progressBar
        .attr('aria-valuenow', value % 100)
        .css('width', (value % 100) + '%')
        .text("");
};

Although it still doesn't work. How can I disable that transition just on this particular PB? I can set the timeout to 1 second, and this problem will go away although I think there are better answers than that.

• javascript
• jquery
• css
• twitter-bootstrap

1 Answer 1

If you add transition:none; to the bar. Then it will only animate as fast as your timer function.

var progressBar = $("div.progress-bar");
var x = 0;
var increment = function() {
  x = (x > 100) ? 0 : x + 1;
  progressBar.css('width', (x % 100) + '%');
};


window.setInterval(increment, 50);

<link href="https://netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12">
    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition:none;">

      </div>
    </div>
  </div>
</div>

You can also add transition-duration:50ms The same as your animation rate and it will smooth animate.

var progressBar = $("div.progress-bar");
var x = 0;
var increment = function() {
  x = (x > 100) ? 0 : x + 1;
  progressBar.css('width', (x % 100) + '%');
};


window.setInterval(increment, 50);

<link href="https://netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12">
    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration:50ms;">

      </div>
    </div>
  </div>
</div>