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.
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.
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.