Adding custom html/css based animated pre-loader for slow loading sites

We have a site that has many images that are being preloaded.Hence the user has to wait for several seconds before the site loads. We would like to have an animated custom message on screen without adding more images. We have the html and css of the animation we would like to use. But are not sure how to use that within hype.

Can someone show how such an integration can be done?

Here is the html and css for the animation that we need. animated preloader html and css.txt.zip (1.0 KB)

1 Like

Thanks again @DBear I did go through the tip you sent. It is more to do with getting an image up there as a preloader. What we are looking to do is an html/css based simple animation (in the attached text file on my post). Getting css to work in hype is a little confusing and daunting for guys like me. Esp as a preloader - because it involves working outside the hype environment to a certain extent - at least that is what i suspect going by the video and the tip.

I wanted to know if the html and css code that we already have can be integrated in the hype project and how.

Hi @sgibm

Using a custom preloader involves adding html / css outside of the Hype environment. When you export you get a html file with a div that points to the Hype generated js file. Before this Div is where you place any custom HTML / CSS that you have. The example above shows you the steps to do this. Even though it uses (or suggests) an image file you can put whatever you want there. So in essence, use the HTML and CSS you want. Make sure it is uploaded in the same folder as the generated Hype HTML file.

So basically you do whatever you want in Hype and when you export it. In the generated HTML file you place code before the generated div code and you will see this while your Hype file loads. Then the Hype file will cover it.

1 Like

Hello @DBear and thanks really for the nice explanation. It really helped. I was able to put together a custom animation but it is really hard to make it work as nicely as i can do in a normal html document and i dont understand why. Can you please shed some light on this? Below are 3 versions of the preloader that i have put together.

Version 1 is an independent html document where you can see the animation playing without any issues - the way i want it to be
http://52.206.39.77/distribution/animtestver1.html

Version 2 is when i try to put that animation in a nested div within hype’s own container div but without the script element after my animation div - I had to modify and add some styling to my div to make it work but am still not able to get the original look and feel - my weakness in coding shines here i think - Can you please show me how to make this work here? I really couldn’t figure out the correct width and height values too and used random ones and that too without any length units like px/% etc!!! and it worked to a large extent. But obviously not quite there.
http://52.206.39.77/distribution/animtestver2.html

Version 3 is the worst situation of all and is the actual version that needs to be implemented to make my animated preloader work with hype - this version is with the nested divs as in ver 2 PLUS the script tag that loads the hype doc. And this completely fails - the animation starts off like in version 2 but suddenly shifts (literally jumps) to a central area which is smaller and completely breaks!
http://52.206.39.77/distribution/animtestver3.html

Another side effect of the body element styling (i think) is the black top blank line above the menu and on the left too which does not come otherwise. Any solutions to this issue too?

I forgot to mention in my last post that the hype document that i am opening (in version 3 above) after the preloader - has scene size that is scalable/flexible to 100% width and height of viewport. Also I am using breakpoint for mobile and the mobile break point size/width is 320px. I suspect that as soon as the script tag is executed my animation div suddenly jumps from the position/width we desire into a position/width of about 320px. Is that it? And even if it is that way, what is the route out of this issue? Anybody out there??? please…

Hi @sgibm

Ok. a few things. The reason your version 3 Hype document jumps is because of your body styling. Your adding flex which will effect everything. My suggestion (and you’re very close) is to leave the body styling to Hype and just focus on the “loading” div.

You have included it in the right place. You must have the <script> tag for your document to show (this is the actual Hype document. It’s javascript)

When you have added your CSS and DIV then just add to the .loading selector the following.

    position: absolute;
    width: 600px;
    top: 200px;
    left: 100px;

*These are just suggestions you may have to change them for your project.

This is an example. It’s quite quick to load but you get the idea. After the document is loaded it covers the animation.

https://dl.dropboxusercontent.com/spa/wkk989fyyvlf2kz/Exports/largeTest/largeTest.html

Thank you so much once again. I did leave the body styling to hype and focussed on .loading selector styling alone.

Here is the updated html:
http://52.206.39.77/distribution/animtestver3.html

I was able to get the animation on screen but it has several issues:

1>
It still jumps from being on the left to jumping in the center - on desktop/laptop

2>
I cant increase the width in .loading style to more than 300 because if i do that the left gets truncated

3>
It has some fixed arbitrary max width because of which I have to reduce my font size to 18 at the most. 18 is too small for desktop and laptop and other high resolution screens. So the only place it looks ok now is the phone device. FYI My first scene has a mobile layout of 320px width and a larger layout of 1920px.

4>
If we are able to resolve the small width issue mentioned in 3 above then we will need to have two font sizes based on the device - 18px for smaller screens and 40px for larger screens.

5>
When we use 18px font as in the html file right now, the animation plays very differently on smaller screens and differently on the larger screens. We would like the animation to play out the way it is doing on larger screens.