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

How to Create Loading Animation for Web page in XD?

Community Beginner ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

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>

TOPICS
How to , Prototyping

Views

245

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
community guidelines
Community Expert ,
Jan 23, 2022 Jan 23, 2022

Copy link to clipboard

Copied

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 🙂

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
community guidelines
Community Expert ,
Jan 24, 2022 Jan 24, 2022

Copy link to clipboard

Copied

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.

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
community guidelines
Community Expert ,
Jan 24, 2022 Jan 24, 2022

Copy link to clipboard

Copied

LATEST

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

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