Javascript progress animation

Question

Hi, I am trying to build a progress bar using jQuery and javascript.

It is basically a bar

<div id="progressbar"><div id="progress"></div>
<div id="number">0%</div>

when you click on the next button (which isnt here) it changes the width of the progress div and using css3 it animates it nicely, but my problem here is the number. I have 5 screens so they are all 20% each and I would like to animate the numbers so while the bar is getting wider the number flicks through all numbers from 0% to 20% in the same time as the bar animation (0.5s)

I know with JQuery you could just use the innerHTML command and change it from 0% to 20% but I wanted to animate it.

Any idea how to do that?

Answer 1

1st get the jQuery progressbar plugin. Here's an example.

Then create a function like:

num = 0;
function pbUpdate(value){
     if (num <= value) {
          window.setInterval('updAnimation(' + value + ')', 10);
     }else{
          clearTimeout;
     }
}

function updAnimation(value){
     num += 1;
     if (num <= value){
          $("#pb").reportprogress(num);
     }
}

If you look at the examples of the plugin and look at this code, you should get to where you want to go. I've used this code as well.