get the progress with animate() JQUERY

Question

Here is the spinet:

$('#processing .progress-bar').animate({'width':'60%'},4000);

Is it possible to display how the milliseconds are being countdown by the function?

for instance I want to be able to display:

4000
3000
2000
1000
0000

then the function stops

Answer 1

You can add a step function to the jquery animate, and inside calcualte how much time is left for the animation to finish:

 $(function () { var Now = 0; var animationDuration = 4000; var DesiredWidth = "200"; $(".test").animate({ width: DesiredWidth }, { easing:"linear", duration: animationDuration, //the argument in the step call back function will hold the // current position of the animated property - width in this case. step: function (currentWidth,fx) { Now = Math.round((100/DesiredWidth)*currentWidth); $(".ms_span").text(Now+"%"); } }); }); 

 div { width: 0; height: 100px; display: block; background: purple; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test"></div> <br/>Percent: <span class="ms_span"> 

Answer 2

After looking at @Banana's solution, I realized that I had completely forgotten about the step function and the new(ish) progress function, both of which can be passed to .animate . My updated solution is below, and I have removed the other to avoid confusion.

 var $steps = $("#steps"); $('#processing .progress-bar').animate({ 'width': '60%' }, { duration: 4000, progress: function(prom, prog, rem) { $steps.html("Prog: " + prog + "<br/>Rem: " + rem); } }); 

 #processing { width: 80%; margin: 5%; border: 2px solid black; height: 25px; } #processing .progress-bar { height: 100%; background: lime; width: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <div id="processing"> <div class="progress-bar"></div> <span id="steps"></span> </div> </div> 

As a side-note, depending on what you are planning to use this for, the other thing that you might want to look into is jQuery's .progress method, which handles progress notifications. Note that I am fairly certain that calling .progress on animations themselves won't have any effect unless you use a solution like the above to make progress notifications at each step of the animation. This is done with calls to .notify or .notifyWith but doing this in an animation is a little extreme. Regardless, this can be useful for situations in which you have an asynchronous call running for an indeterminate amount of time.

• Docs for deferred.promise .
• Docs for deferred.notify .
• Docs for deferred.notifyWith .

Answer 3

 var duration = 4000, interval = 1000, pbar = $('#processing .progress-bar'); pbar.text( duration ); var cd = setInterval(function() { duration -= interval; pbar.text( duration ); }, interval); pbar.animate({'width':'60%'}, duration, function() { clearInterval(cd); pbar.text( '0000' ); }); 

 .progress-bar { background-color: black; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="processing"> <div class="progress-bar">pBar</div> </div>