I have a VERY complex page that takes about 20-30 seconds to load. I’d like to show a lightbox, with spinning processing, or loading, feedback while the page is loading initially. As best I can tell, my spinning loading feedback, that I have set to run OnPageLoad, only appears AFTER the page is completely loaded.
Is there a way to cause feedback to appear while the page is initially loading?
Yes, the on page load fires at the very end. This may be a dumb suggestion, but what if you showed the spinning graphic and hid everything else. Then on page load, hide the spinning graphic and show everything else?
Update - it was a dumb suggestion. I tried it out on a slower page I have and basically nothing shows until the page loads…
It does hide everything until the page has loaded which is better than nothing. I tried this technique too, the only problem is showing a message or loader before everything else has loaded.
If you can put your slow page in an inline frame, then you could put your spinner/preloader graphic over the inline frame.
The OnPageLoad pof slow page could set value of global variable and “host page” could have a repeating dynamic panel checking for that global variable value. When it changes, hide the preloader and show the inline frame.
Hello, I know this is a late answer, but I just found an excellent tutorial for creating a progress bar. You can set the amount of time in which it loads. I imagine you can set the action to occur upon page load rather than on “button click.”
Good luck!
Also late to the topic, but figured I’d post my solution for posterity. I, like the original poster, have many highly complex and slow-to-load prototypes. It is not uncommon for a finished prototype to take 15-30 seconds to load.
If I am sitting with a user it’s easy enough for me to explain this delay away, but it has caused issues when the user wasn’t aware of what was happening. For this reason, a colleague and myself set out to find a way to build a “pre-loader.”
The problem with trying to do this in Axure is that the same delay in loading your prototype will also delay the display or animation of any pre-loader you add to the file. Instead, create a loader with CSS and attach your loader to the body element (example below). This will be rendered nearly instantly, even while the prototype continues to load the content within the body.
A couple things to note:
in my example I am using a ::before pseudo element. You could use an ::after instead, but in my case I didn’t want to try to deal with hiding the element after the prototype loaded (which you could do) and instead just let the prototype contents cover my loader which is perpetually in the background. Depending on your prototype you may not be able to cover the loader and may need to write a condition onLoad in Axure to hide your pseudo element.
I use FontAwesome icons within my prototype and thus I am referencing the FontAwesome stylesheet. Because of this I did not have to create my own keyframe animation and instead referenced FontAwesome’s “fa-spin” class. If you are not pulling in FontAwesome’s stylesheet or want to use a different animation (if any) you will need to create your own animation.
In my example I wanted to use a FontAwesome icon animated to spin for my pre-loader. I had issues where sometimes the FontAwesome stylesheet wasn’t loading in time to actually display the loader. To resolve this I pulled the SVG of the FontAwesome glyph I wanted and converted it to base64. You could also reference an image file or place a character in the content.
This solution requires you to pull an external stylesheet into Axure. This is very simple to do. Simply go to Publish > Preview Options > Configure. Select the ‘Web Fonts’ tab and click the + to add a new row. You can put pretty much anything in the ‘Name’ field (I usually just put css) and then the URL should point to your stylesheet file.
EXAMPLE
body::before {
background-image: url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ aria-hidden=‘true’ focusable=‘false’ data-prefix=‘far’ data-icon=‘spinner-third’ class=‘svg-inline–fa fa-spinner-third fa-w-16’ role=‘img’ viewBox=‘0 0 512 512’%3E%3Cpath fill=‘rgb(238, 238, 238)’ d=‘M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z’/%3E%3C/svg%3E”);
background-repeat: no-repeat;
content: ‘’;
position: absolute;
display: block;
top: calc(50% - 10vh);
left: calc(50% - 5vh);
height: 10vh;
width: 10vh;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
Hopefully this helps some Axure ninjas in the future. Cheers!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.