How to Create Loading Animation for Web page in XD?

[Tasmia Tabassum]

Hello Everyone,

I hope you all are well & healthy in Covid situation. I am posting fast time in this community. So, it will be very helpful & I will be very greatful if anyone can help me. 

I am facing problem to create loading animation in XD for my website as I want. I created one loading page but the prototype of this page is getting worng. I put the loading page prototype in Overly of the page, sothat the loading page can popup of the page. But it doesn't work. 

Also, I don't know how to prototype loading page into the next page. Please help me anyone. 

Thank you. 

<Title renamed by moderator>

[AkinGn]

Hi @Tasmia Tabassum, I think I'd resolve it with time triggers (Check this tutorial if you haven't used time triggers https://www.youtube.com/watch?v=bFQEv3XBQCk , here Alex loops the animation with time triggers but maybe creating 2 loops with artboards (cloning the animation again) to show the users loading animation twice in prototype video and then looping out by linking the last animaton's last artboard to the app's first screen.Or while recording your prototype/interaction, you can set a tap trigger to loop out of the loading animation to simulate the app's loading process.  I hope this makes sense, let me know if it sounds too complicated so I'll answer your questions ok 🙂

[Chris W. Griffith]

Using Time Triggers would be the key to solving this:

Artboard 1(Iniital state of the web page), has a time trigger to show the animation as an overlay (artboard 2). Then apply a second time trigger (or user tap if you need to control the dismissal for review/discussion) to then go Artboard 3 which is the loaded version of the web page.

[AkinGn]

I liked the second time trigger idea better than a tap trigger @Chris W. Griffith , so I tried to simulate that in this video using a lottie animation, hope this helps, @Tasmia Tabassum 🙂 https://www.dropbox.com/s/ux0yykob3yn7c1q/loading-animation.mov?dl=0