0

I am developing a progress bar which html looks like so

<div class="progressbar"><div class="text">%0 Completed</div>
            <div class="progressbar_inner"></div>
        </div>

and used this jquery codes for it:

$(".progressbar_inner").animate({
                width:"20%"
            },100,function(){
                $(".text").html("%20 Completed");
                });

My question is: I want to print percentage of the progress bar when animate started and finished. Like so : %1 Completed %2 Completed and etc. Anyone helps me?

user2854865
  • 65
  • 1
  • 3
  • Instead of using animate, write your own method that loops and increases the width by 1% using `$(elem).css('width', iterator + '%')`. In each iteration also set the $(".text").html() to your iterator value. – Danwilliger Mar 29 '13 at 16:15
  • you mean do I have to write a function includes parameter called "iterator" or something another? – user2854865 Mar 29 '13 at 16:21

1 Answers1

1

You could use the step option of the animate-function:

$(".progressbar_inner").animate(
    {width:"50%"},
    {duration: 1000,
     step: function(current_number){
       $(".text").html(Math.floor(current_number) + "% Completed");
     }
    }
);

See in action: http://jsfiddle.net/willemvb/JRqVw/

Willem Van Bockstal
  • 2,233
  • 1
  • 17
  • 24