Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tomKnox

Bootstrap progressbar aria-valuenow animation?

Recommended Posts

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.

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

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