Highlighted

How to Apply Loading Animation While the Page Loads

New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

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

 

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

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!

Views

107

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to Apply Loading Animation While the Page Loads

New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

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

 

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

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!

Views

108

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 13, 2020 0
Adobe Employee ,
Aug 13, 2020

Copy link to clipboard

Copied

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

A cool loading animation can be created in less than 5 minutes in #adobexd using the #autoanimate feature.The XD file : https://drive.google.com/file/d/1hf5T6sQ...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
Adobe Community Professional ,
Aug 13, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 1
New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
Adobe Employee ,
Aug 13, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 1
New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
Adobe Employee ,
Aug 13, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2020 0
New Here ,
Aug 14, 2020

Copy link to clipboard

Copied

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%...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2020 0
New Here ,
Aug 15, 2020

Copy link to clipboard

Copied

Any update?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 15, 2020 0
Adobe Community Professional ,
Aug 17, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 17, 2020 1