Preloader Position

Contributor ,
Sep 19, 2021 Sep 19, 2021

Copy link to clipboard

Copied

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. 

Views

87

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 20, 2021 Sep 20, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 20, 2021 Sep 20, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 21, 2021 Sep 21, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 25, 2021 Sep 25, 2021

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines