Skip to main content
T
Tasmia Tabassum
New Participant
January 22, 2022
Question

How to Create Loading Animation for Web page in XD?

  • January 22, 2022
  • 2 replies
  • 810 views

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>

This topic has been closed for replies.

2 replies

Chris W. Griffith
Community Expert
Chris W. GriffithCommunity Expert
Community Expert
January 24, 2022

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
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    January 24, 2022

    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

      AkinGn
      Community Expert
      AkinGnCommunity Expert
      Community Expert
      January 23, 2022

      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 🙂

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices