Preloader Position

[lcg_2012]

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. 

[JoãoCésar]

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]

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

[JoãoCésar]

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

[lcg_2012]

Thanks for the link but that is outside my comfort level. I found a simpler solution. This animation is going to be played via an iframe within a Wordpress website. 

So I changed this:

<div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:1080px; width: 1920px; text-align: center;'>

to this:

<div id='_preload_div_' style='position:absolute; top:0; left:0; right:0; bottom:0; display: inline-block; text-align: center;'>

And it is now centered. I also opened the animated GIF: "_preloader.gif" in Photoshop and added some text above it to say "Loading Patients" and I now have a working, centered preloader.