Select the ‘Web Fonts’ tab and click the + to add a new row. Simply go to Publish > Preview Options > Configure. This solution requires you to pull an external stylesheet into Axure. You could also reference an image file or place a character in the content. To resolve this I pulled the SVG of the FontAwesome glyph I wanted and converted it to base64. I had issues where sometimes the FontAwesome stylesheet wasn’t loading in time to actually display the loader. In my example I wanted to use a FontAwesome icon animated to spin for my pre-loader.
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. Because of this I did not have to create my own keyframe animation and instead referenced FontAwesome’s “fa-spin” class. I use FontAwesome icons within my prototype and thus I am referencing the FontAwesome stylesheet. 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. 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. In my example I am using a ::before pseudo element. This will be rendered nearly instantly, even while the prototype continues to load the content within the body. Instead, create a loader with CSS and attach your loader to the body element (example below). 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. For this reason, a colleague and myself set out to find a way to build a “pre-loader.” 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. It is not uncommon for a finished prototype to take 15-30 seconds to load. I, like the original poster, have many highly complex and slow-to-load prototypes. Also late to the topic, but figured I’d post my solution for posterity.
0 kommentar(er)
