title: Disable smooth animation transition of Bootstrap Progress Bar on certain percent
body: <p>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 (<em>"1 out of 100 tasks completed"</em>... <em>"99 out of 100 tasks completed"</em>), the background task is limited in sending only one status report. And that is at the end of the AJAX call.</p>
  
  <p>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%.</p>
  
  <p>In <a href="https://jsfiddle.net/gabardelas/o145crvm/1/" rel="nofollow">my jfiddle</a>, 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.</p>
  
  <p>I though the animation is because of the <code>.active</code> class of the PB. So I tried to remove that in between 100% to 1%:</p>
  
  <pre><code>var increment = function(value) {
      if(x &gt; 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("");
  };
  </code></pre>
  
  <p>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.</p>