title: How do you animate a twitter-bootstrap progress bar smoothly?
body: <p>I have multi-player game with a 30 second timer at the bottom of the screen.
  If none of the players make a move for 30 seconds, the form submits.</p>
  
  <pre><code>var ProgressValue = 0;
  function showProgress() {
      ProgressValue += 100/30;
      if (ProgressValue &gt; 100) {
          $('form').submit();
      }
      // Ajax is done here to see if anyone has made a move.
      $('.progress .bar').css('width',ProgressValue + '%');
      setTimeout(showProgress, 1000);
  }
  
  setTimeout(showProgress, 1000);
  </code></pre>
  
  <p>Each second, I check the Application scope to see if anyone has changed the value of</p>
  
  <pre><code>Application.LastMove
  </code></pre>
  
  <p>I want the progress bar to animate smoothly, but I don't want to do it by reducing the timeout value.  I think that checking to see if anyone has taken a move every second is enough load on the server already.</p>
  
  <p>I've heard of WebSockets, but my current server is on ColdFusion 8, so (I think) I'm satisfied with doing an ajax call every second, unless you feel that ajax is not as elegant and from a less civilized age.</p>
  
  <p>Q: How do you animate a twitter-bootstrap progress bar smoothly from 3.3% to 6.6%?</p>