Bootstrap progressbar aria-valuenow animation?

[tomKnox]

Hi,

Having a standard bootstrap progress bar — is it possible to actually tween it's value.
i see over complicated things online, but not a simple progress bar without alternations. Hence the question.
 

<div class="progress">

                              <div class="progress-bar active" role="progressbar" aria-valuenow="0" aria-valuemin="90" aria-valuemax="100" style="width: 90%"> <span class="sr-only">90% </span>

                              </div>

 

                            </div> 

 

So how would I simply animate it's value? Any tip is greatly appreciated.

My apologies if this is already covered, however I couldn't find the answer for this simple example.

Thank you for your help.

[Jonathan]

Hello tomKnox, and Welcome to the GreenSock Forum!

 

Here is a way to animate the aria progress aria-valuenow attribute without Bootstrap.

 

See the Pen oxJdwG by jonathan (@jonathan) on CodePen

 

You have to use the AttrPlugin and an onUpdate special callback within your to() tween.

 

But keep in mind that animating the aria-valuenow attribute alone will not make an aria progressbar just work.

• You also need to animate the width of nested div or the width on the element itself for the visual progress bar with a background-color to animate its width.
• As well as animating the percentage text to make it change value

To animate a Bootstrap aria progress bar the style width and the aria-valuenow attribute is on the same element.

 

With Bootstrap aria progressbar, you could do something like this :

 

See the Pen GZPdbe by jonathan (@jonathan) on CodePen

 

var tl = new TimelineMax({
    paused:true
});

TweenLite.set(".progress-bar", {width: "0%", autoRound: false});
  
tl.to(".progress-bar", 2,{
    attr:{
        ariaValuenow: 100
    },
    width: "100%",
    autoRound: false,
    ease:  Power0.easeNone
});

tl.play();

Some other progress type of animations using GSAP:

 

See the Pen RNKPLo by jonathan (@jonathan) on CodePen

 

See the Pen keEyq by jonathan (@jonathan) on CodePen

 

Resources:

GSAP AttrPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

GSAP to() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/

Aria progressbar: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

 

If you are still having an issue please create a codepen demo so we can better help you by seeing your code in a live editable environment.

 

 

Thanks

[Carl]

Hey Jonathan,

 

Thanks for jumping in on this one. I suspected that AttrPlugin would be part of the equation but really have zero experience with the boostrap progress bar. 

Always appreciate all your extra thorough effort!