JQuery revive percentage?

Question

Ive looked all over the place, but I can't find how to use the jQuery.animate () function to revive the percentage that I have.

I have a progress bar with a percentage number above it. When the page loads, I just want the number to increase from 0 to a certain number, say 67%. How can I revive a number so that it displays as 1%, 2%, 3% ... to 67%?

It should also be noted that I would like to use the jQuery.animate () function because I want to determine the time it takes to reach 67%.

Answer 1

You can do this right inside the animation function using the step property. Something like that:

  $(elem).animate({ width : '200px' //whatever your bar animation consists of }, { step : function(now, fx){ //use the 'now' to calculate percent and update the number $(percentElem).text(now / 200); } }, 2000); // set duration 

Answer 2

This will be a beter to make your own function. I can offer one.

 window.loadBar = { startTime: null, time: 500, updater: null } function loadBarStart(){ loadBar.startTime = new Date(); loadBar.updater = function(){ var delta = (new Date() - loadBar.startTime)/loadBar.time; $("#bar").html((delta*100)+"%"); if(delta<1)window.setTimenout(loadBar.updater, 30); } loadBar.updater(); } 

I have not tested it, but it should work.

Answer 3

Perhaps you want to use $('#element').html(data) getting data from a real source or using a timer. The progress bar is usually done by dynamically adding this number as the width of the progress bar.

Answer 4

If you don't like writing code from scratch, check this out: http://jqueryui.com/demos/progressbar/

After you run this progress bar, you “revive” it like this:

 $('#yourBar').progressbar( "value" , 55 ); 

Answer 5

Here my solution is based on previous answers. In this case, “percent” is a global variable that is set before the function is called. Play with the decimal digit added to the value and setTimeout ms to change the behavior.

 function animateProgress() { var value = $("#progress").progressbar( "option", "value" ); if ( value < percentage ) { value = value+.5; } else if ( percentage < value ) { value = value-.5; } $("#progress").progressbar( "option", "value", value ); $('#readout').html( value+' - '+percentage+'%' ); if ( value != percentage ) { setTimeout( function(){ animateProgress(); }, 2 ); } }