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.

var ProgressValue = 0;
function showProgress() {
    ProgressValue += 100/30;
    if (ProgressValue > 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);

Each second, I check the Application scope to see if anyone has changed the value of

Application.LastMove

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.

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.

Q: How do you animate a twitter-bootstrap progress bar smoothly from 3.3% to 6.6%?

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.

var ProgressValue = 0;
function showProgress() {
    ProgressValue += 100/30;
    if (ProgressValue > 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);

Each second, I check the Application scope to see if anyone has changed the value of

Application.LastMove

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.

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.

Q: How do you animate a twitter-bootstrap progress bar smoothly from 3.3% to 6.6%?

• javascript
• coldfusion
• twitter-bootstrap

• Oh wait. I could use the .animate method, couldn't I? – Phillip Senn Commented Sep 7, 2012 at 15:04
• Simply updating the width percentage animates it smoothly. The browser must support transitions for it to work though. Fiddle to show it. – James Kleeh Commented Sep 7, 2012 at 15:11
• From the bootstrap page: Browser support Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations. – James Kleeh Commented Sep 7, 2012 at 15:17
• James: Thank you for those two comments! It looks choppy because I pause every second and change the width. So it's because of my wanting to not go to the server more than once/second I suppose. I wonder if there's a property that I could just set to be a duration of 30 seconds? – Phillip Senn Commented Sep 7, 2012 at 16:58

1 Answer 1

Don't animate using jQuery, prefer CSS animation, unless you have to support old browsers.

I've made this copying from Bootstrap style:

.bar {
  -webkit-transition: width 30.0s ease !important;
     -moz-transition: width 30.0s ease !important;
       -o-transition: width 30.0s ease !important;
          transition: width 30.0s ease !important;
}

For so long transition, I suggest you to try different animations: http://www.the-art-of-web.com/css/timing-function/

In my example I've added two things that could be usefull:

1. Button text changes when the animation starts and when it ends (just to check animation timings)
2. Check if the browser support this animation: you can use your jQuery code as fallback mode

For more information about how to detect CSS animation support: https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support

Example: http://jsfiddle.net/CUbgr/5/