Skip to main content
Rishabh5C7F
Participating Frequently
Aug 13, 2020 12:52 PM UTC
Answered

How to Apply Loading Animation While the Page Loads

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

 

      This topic is closed to new replies. Start a new post to keep the conversation going.
      Spas K.
      Spas K.Correct answer
      Community Expert
      Aug 17, 2020 3:40 PM UTC

      Any update?


      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!

      View reply

      10 replies

      Dan Rodney
      Community Expert
      Dan RodneyCommunity Expert
      Community Expert
      Aug 13, 2020 1:34 PM UTC

      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.

      Translate
      Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
        Rishabh5C7FAuthor
        Participating Frequently
        Aug 13, 2020 4:03 PM UTC

        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.

        Translate
        Rishabh_Tiwari
        Rishabh_Tiwari
        Legend
        Aug 13, 2020 5:54 PM UTC

        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

        Translate
          Harshika Verma
          Community Manager
          Harshika VermaCommunity Manager
          Community Manager
          Aug 13, 2020 1:32 PM UTC

          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

          Translate
          Rishabh5C7FAuthor
          Participating Frequently
          Aug 13, 2020 4:01 PM UTC

          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.

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