Thread: Animation

I'm really hoping someone can help me. I'm trying to animate a progress bar by taking the % value from the div attribute.

So far i have animated it to my requirements with this simple code

Code:

$(".progress-bar").animate({
       width: "75%"
       }, 1000);

This obviously works perfectly until i need multiple progress bars with different values, so what i want to do is use a script to obtain the ariavalue-now attribute value

Code:

<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 0%">

This piece of code does just that, but being an absolute novice, i have no idea how to tie the 2 pieces together.

Code:

var width = $( ".progress-bar" ).attr( "aria-valuenow" );

Any assistance would be greatly appreciated.

Thanks

Disregarding the min and max, perhaps you're looking for something like this:

Code:

$(".progress-bar").animate({
     width: $(this).attr("aria-valuenow") + '%';
}, 1000);