jQuery Animated Progress Bar

[trigger212]

Hey there everybody,

I am having a small jQuery issue, basically i am trying to build a progress bar that would load from 0 to the given percentage over a period of 1-2 seconds.

Look at what i have come so far based on a tutorial: http://jsfiddle.net/mWdgz/1/

The fiddle wouldn’t animate it, but let me describe what actually happens (apparently it does work on my test files).

So the progress bar does load as supposed but it stops at the value given to “title=” in html. It wouldn’t accept percentages so if the set width is 460, to make the bar stop at 50%, i would have to give it a value of 230.

Another issue about this script is that only the first bar actually takes the real value, all other ones just “copy” the first one no matter the values given to them. Looks strange to me.

I am either looking for a way of solving both of these issues, or a better way of achieving the desired effect, preferrably with a way of inputting in percentages not pixel value.

Thanks

[Paulie_D]

http://html5doctor.com/the-progress-element/

[trigger212]

Hey Paulie,

I’ve read the entire article and couldn’t come up with a solution. It doesn’t really help me achieve the desired progress bar (or does it?) and one bad thing about the progress element is that it’s only supported in IE10 which seems very “unfriendly” solution to me as i have seen a lot of jQuery based progress bars but couldn’t come up with a result myself.

Still looking!

[Paulie_D]

Fair enough, if we go down your existing route…

I’m no Jquery expert (barely a beginner) but it seems not impossible to me to use the various animation tools/options to animate a width over a set period.

I’m not sure what the `title` attribute is adding here.

[Malgosia]

Hi! :)
Firstly, you should set Your “Frameworks & Extensions” in JSFiddle to can use jQuery.
After that code starts working like you said. Only first bar is animated properly.
It is becouse you set percent variable once:
var percent = $(‘.progress_bar’).attr(‘title’);

To fix it, iterate through all the bars. You can use “each” function to do this.

See: http://jsfiddle.net/mWdgz/6/

Regards

[Author]

Posts