Question

i am trying to have a horizontal progress bar, for which, it starts with full, and ends empty to simulate the 30 seconds timer.
that is, at time 0:30, the progress bar is full, at 0:29, the progress bar should decrease proportionally.

handling animation is a pain, so i decide to use the css 3 animation which mozilla supports

so basically this is what i have

 .progress-bar {
    height: 8px;
    width: 0;
    background: -moz-linear-gradient(top,  #00679A 0%, #FFFFFF 30%, #00679A 100%);
    margin: 0px 4px;
    -moz-animation-duration: 30s;  
    -moz-animation-name: update;      
  }

 @-moz-keyframes update {
   0% {width: 100%;} 
   50% {width: 50%;}
   100% {width: 0%;}
 }

two issues with this approach, if you know answer to any one of those, please don’t hesitate to reply

1. there is actually a numeric counter counting down (from 0:30 to 0:00), it is supposed to in sync with the css animation progress bar pasted above…but the progress bar actually start animating (once shown) before the numerical counter one (via javascript), does mozilla have something like i can tell it when to start animating?

2. although the duration of the animation is set at 30 seconds…but the ‘tempo’ looks weird, it starts animating fast, and then slow….and it doesn’t make sense because the numeric timer shows u have more than half time left (i.e. > 15) but then the progress bar is already less than half gone….at the end it still finishes animating at time 0…it is weird. for ‘update’ css selector above, if i hard code every percentage i.e. from 0% to 100% it is better, but still the ‘tempo’ doesn’t look correct…anyway i can fix this??

Thanks

Answer 1

For problem #1, you will want to do something like this:

.progress-bar {
  height: 8px;
  width: 0;
  background: -moz-linear-gradient(top,  #00679A 0%, #FFFFFF 30%, #00679A 100%);
  margin: 0px 4px;
}

.start-animating {
  -moz-animation-duration: 30s;  
  -moz-animation-name: update;      
}

// When you're ready
$(".progress-bar").addClass("start-animating");

For problem #2, you will want to change the transition function to linear; it defaults to ease:

.start-animating {
  -moz-animation-duration: 30s;  
  -moz-animation-name: update;
  -moz-animation-timing-function: linear;
}