Progress Bar Example not Working Correctly

[hackfin 6 Likes (Newbie)]

I am working on a progress bar demonstration that simulates the downloading of multiple files.  To simulate the time it takes to download each file, I created a random time between 1 and 5 seconds as the lag between each tween.  Either the function that creates the lag or one of my methods that creates the tween seems to be the problem.  At this point, I have looked at it for such a long time that I just can not figure it out.  Any assistance or advice would be appreciated.  See the codepen link for a demonstration of the issue(s).

 

Thanks,

James

See the Pen NAVmxL by hackfin (@hackfin) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Did you fix it? It seemed to be working fine for me. If you're still having trouble, I would suggest starting from scratch. That sure seems like a lot of code for a progress bar. Here's a really clean, and simple demo showing a progress bar at different speeds.

See the Pen rOKpBb?editors=0010 by MAW (@MAW) on CodePen

[Jonathan 5,176 Likes (Superhero)]

To add tonBlakes great example.

 

Here is another progress bar test

 

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

 

And one using Aria progress bar

 

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

 

And Bootstrap Aria progress bar

 

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

 

Hopefully they give you ideas.. Happy Tweening!

[hackfin 6 Likes (Newbie)]

Thanks to all.  I figured out my issue with my setTimeout function and updated the codepen.

[Jonathan 5,176 Likes (Superhero)]

Hello hackfin, Instead of using setTimeout() you can use the GSAP delayedCall() method if you like:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

//calls myFunction after 1 second and passes 2 parameters:
TweenMax.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
    //do stuff
}

Happy Tweening!

[OSUblake 9,990 Likes (Superhero)]

How does that bootstrap one work? That definitely isn't linear, and you can't restart it.

See the Pen GZPdbe?editors=0010 by jonathan (@jonathan) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Thanks Blake for pointing that out. The aria bootstrap one is a little buggy, and wont bring back to zero on restart, hence why i dont like bootstrap anything. It seems you might have to use a fromTo() tween to bring it back to zero. But it wont except the restart of the tween though. I think something in the bootstrap JS  is conflicting with GSAP. But i haven't had time to debug it

[OSUblake 9,990 Likes (Superhero)]

I'm guessing bootstrap probably has some CSS transition/animation tied to it.

[Jonathan 5,176 Likes (Superhero)]

Alright restart should work now.. i gave transition:none; on the .progress-bar .. good catch!

 

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

/* override bootstrap hoopla */
.progress-bar {
  -webkit-transition:none;
  transition:none;
}