Jump to content
GreenSock

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

Progress Bar Example not Working Correctly

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

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!

  • Like 4
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

 

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

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

:)

  • Like 1
Link to post
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.

×