Jump to content


Bootstrap progressbar aria-valuenow animation?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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>




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.

Link to comment
Share on other sites

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({

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


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



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 :)

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.