Skip to main content
R
Rishabh5C7F
Participating Frequently
August 13, 2020
Answered

How to Apply Loading Animation While the Page Loads

  • August 13, 2020
  • 2 replies
  • 7608 views

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 has been closed for replies.
      Correct answer Spas K.

      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!

      2 replies

      Dan Rodney
      Community Expert
      Dan RodneyCommunity Expert
      Community Expert
      August 13, 2020

      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
        R
        Rishabh5C7FAuthor
        Participating Frequently
        August 13, 2020

        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.

        Rishabh_Tiwari
        Rishabh_Tiwari
        Legend
        August 13, 2020

        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

          Harshika Verma
          Community Manager
          Harshika VermaCommunity Manager
          Community Manager
          August 13, 2020

          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

          R
          Rishabh5C7FAuthor
          Participating Frequently
          August 13, 2020

          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.

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