11

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%?

4
  • Oh wait. I could use the .animate method, couldn't I? 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. 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. 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? Sep 7, 2012 at 16:58

1 Answer 1

14

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/

3
  • Wow Francesco, thank you very much! I was running around yesterday and only had time to jot down a few ideas. Thanks for putting it into code! Sep 8, 2012 at 19:49
  • @Phillip You're welcome. You're question was so interesting that it needed an adequate research :) Sep 8, 2012 at 19:53
  • 12
    I would be nice to refresh that Fiddle since the link is dead. Oct 7, 2014 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.