Skip to main content
lcg_2012
Inspiring
September 19, 2021
Question

Preloader Position

  • September 19, 2021
  • 1 reply
  • 1310 views

I am using the Default preloader for a HTML5 animation to have something on the screen during the transition between two Animate files.

 

The first published Animate's .html page links to another and there is a lag while the second one loads. This jump from one HTML file to another happens right after "The following six patients arrive at your Emergency Department(ED)."

 

Depending the screen size, the default throbber GIF shows in the corner or not at all. I would love for it to be centered horizontally and vertically.

 

My Publish Settings are set to "Make Responsive" with Center Stage unchecked. With Center Stage Checked it does center horizonatally, but not vertically.

 

Is there a setting I am missing?

 

Also, I would like to create my own preloader, is there a certain size I should make it?

 

My animate piece is sized 1920x1080. 

    This topic has been closed for replies.

    1 reply

    JoãoCésar17023019
    Community Expert
    Community Expert
    September 20, 2021

    Hi.

     

    I can tell you by experience that if you want to create a proper preloader for Animate content is better to edit the publish template and use CSS. It's not so hard, it's way lighter, and versatile.

     

    Please let me know if you need help implementing one using this approach.

     

    Regards,

    JC

    lcg_2012
    lcg_2012Author
    Inspiring
    September 21, 2021

    I would appreciate any help you could give. If there is an online tutorial, I'll take it.

    JoãoCésar17023019
    Community Expert
    Community Expert
    September 21, 2021

    Sure.

     

    Please visit the link below:
    https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/custom_preloader

     

    There are two publish templates: one that uses a infinite loader approach and another one that tracks the loading progress.

     

    You can create the loading animation yourself using CSS and HTML or grab the code from websites like https://loading.io/css.

     

    Please let us know if you have any further questions.

     

    Regards,

    JC