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%?
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:
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With