How to Apply Loading Animation While the Page Loads

[Rishabh5C7F]

I have Created a loading Animation But I dont know how to apply or use it. I have searched a lot of videos but all of them show tutorial on how to make but not how to use. Please Help

[HARSHIKA_VERMA]

Hi Rishabh,

Thank you for reaching out and using Adobe XD. Would you mind checking this video tutorial: https://www.youtube.com/watch?v=-JTOPMqyTNw and see if that helps?

Thanks,

Harshika

[Rishabh5C7F]

Thanks Harshika for Quick Response. It is a tutorial for Making a Loading Animation and that is Exactly the kind of Animation that I made, But What I want to know is how to apply or use it so that the while page loads that animation appears.

[Dan Rodney]

Make the artboard(s) for the loading animation. Then in prototype mode add a Time Trigger that will automatically take you from that to the first screen of your website/app.

[Rishabh5C7F]

Dan thankyou for Response, but I am new to Adobe XD. Can you please elaborate on how I can connect my Animation Artboard with my Webpage artboards.

[Rishabh_Tiwari]

Hi Rishabh,

Thanks for reaching out. While using time triggers, you can animate between artboards. In prototype mode, you will need to wire Animation artboard with the other artboard, Once you will preview it will show loading animation artboard first. You can refer to these user guides for more information: https://helpx.adobe.com/xd/help/create-prototypes.html

Regards

Rishabh

[Rishabh5C7F]

Hi Rishabh,

Thankyou for response, and I am lucky to get a response from Myself😁. I tried it but I wasnt able to get it done. I have attached a copy of the animation that I am using,can you please create  a prototype in which shows this loading animation while the webpage being directed to is loading. For  reference if you have seen Roblox or Discord loading animation, that is exactly what I want to do. Thankyou for your time and Consideration. 

[HARSHIKA_VERMA]

Hahahah.. 🙂 Yes, we also have Rishabh in our team as well. 

You said you attached the copy of the file but we don't see it here. It might be because you are directly uploading the XD file into the post which is not possible as of now. You need to upload the file to a shared location such as Creative Cloud or Dropbox and then share the URL with any of us over a private message.

Note: Please add the URL of this post over a PM for reference.

Thanks,

Harshika

[Rishabh5C7F]

I am extremely sorry for the delay. I was consumed by work at a point where I forgot about it. Here is the animation , and please send a prototype where this Preload Animation appears whenever the Web Pages Load (like a preload animation). And also I want to make it look like an overlay on the current web page, so please can you make it done (i have attached a reference loading of a website called Discord to give you an Idea). And sorry for my Poor Grammar in my Previous communication with you people (it was embarassing when i read them today), maybe my brain wasnt working because of late night grinding.

https://www.dropbox.com/s/avtrnqp3h7g2ye6/Bub%20Loading%20Screen.xd?dl=0

Thanks.

(reference Discord Loading-https://www.dropbox.com/s/y26bm22y3p1v8eo/Discord%20_%20Your%20Place%20to%20Talk%20and%20Hang%20Out%...

[Rishabh5C7F]

Any update?

[Spas K. · Accepted solution]

There you go: https://www.dropbox.com/s/259gfifhlwqw8r4/BubLoadingScreen_Done.xd?dl=0

You can't make it as an overlay, because overlays don't work with auto-animate.

It's a bit hard to reuse it, as you will have to make the chain for every page you want to show the loading on, but it's fine for showing it on one screen. 

For better functionality, we have to wait for the gifs and video embed feature they promised us some time ago.

Cheers!