Need a looping loading bar

I just need a looping loading bar. How would I do that?

OnLoad
  Do whatever actions you want
  Wait XXXms
  Fire event: OnLoad

Basically do whatever you want with the OnLoad event, then at the very end wait some amount of time and fire the OnLoad event again.

The “whatever” might be a rotate action, or changing panel states, or anything you need to do to make a “loading bar”.

2 Likes

This works perfectly! Thank you.

Really like what nkrisc laid out. Other approaches:

  • Create your loading animation in your favorite graphics app, save as animated GIF with looping, then just drop it on the page.
  • Search the web for existing GIF --there are tons.
  • (Modification/extention of nkrisc approach) Create your loading bar in Axure. Maybe it is just a rectangle widget, maybe it has another rectangle behind it for a trough, etc. The bar itself, what you will animate and loop, can start at say, 10 px wide. It’s Loaded can have an action to “Set Size of This to 200 w, Height h, linear 1000 ms”. Add a Resized event with case of “(IF [[This.width]] equals 200) Wait 500ms, Set Size of This to 10 w, Height h, Wait 500, Fire This Loaded” --Maybe include additional condition of “IF visible” so it doesn’t continue to run forever.

One other approach, depending on your need:

  • create a dynamic panel where each loading step is a state
  • On the trigger event where your loading should start, set the dynamic panel to “next”
  • check the “Wrap from last to first”
  • In the “more options” panel check the “repeat every n ms” and define at which interval the panel changes to the next state
1 Like

For loading stuff I use this site to generate

http://www.ajaxload.info/

then just add wait and open whatever you want to open