• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

How to Apply Loading Animation While the Page Loads

Community Beginner ,
Aug 13, 2020 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

 

Views

5.8K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 17, 2020 Aug 17, 2020

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!

Votes

Translate

Translate
Adobe Employee ,
Aug 13, 2020 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

Votes

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
community guidelines
Community Beginner ,
Aug 13, 2020 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.

Votes

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
community guidelines
Community Expert ,
Aug 13, 2020 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.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Votes

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
community guidelines
Community Beginner ,
Aug 13, 2020 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.

Votes

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
community guidelines
Adobe Employee ,
Aug 13, 2020 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

Votes

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
community guidelines
Community Beginner ,
Aug 13, 2020 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. 

Votes

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
community guidelines
Adobe Employee ,
Aug 13, 2020 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

Votes

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
community guidelines
Community Beginner ,
Aug 14, 2020 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%...

Votes

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
community guidelines
Community Beginner ,
Aug 15, 2020 Aug 15, 2020

Copy link to clipboard

Copied

Any update?

Votes

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
community guidelines
Community Expert ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

LATEST

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!

Votes

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
community guidelines