Loading screen animations: how are they applied once created?

[Braden]

So,

Let's I've created a clean looking loading screen animation for my website, a gif; how do I make it run on all the pages while they are loading, go away when they're done, and then have all the web animations on the pictures and things run after it goes away?

[Egg Bramhill]

... a gif; how do I make it run on all the pages while they are loading, go away when they're done

Load your loading gif at the bottom level. Above this load your page content with a background colour matching your site. The gif, being small will load quickly then the content loads and overlays (hides) the loader gif.

Example image offset to show the hierarchy.

[Braden]

Very good idea, but I was to make it somehow have the gif on a white background, and have it play until the page is completely loaded, have the gif and white background fade away, then play all the reveal animations.

Here's an example: https://logosbynick.com/

[Egg Bramhill]

Two things there Brandon:

1: Your example site is not a gif, as the shapes 'tween' smoothly from one to the other.
2: There is no page loaded script, it just plays until the visitor clicks the Down arrow.

Xara can't create this on it's own (apart from using swf but this is outdated)

Xara can create the shapes used in the animation but you'll need additional software to create the the animated html. I've used Hipanni to create the one in the link below. I've then embedded it it into a super site in Xara.

https://parkeston.com/brandon/

[Braden]

Does it NEED to be a supersite?

Also, it seems that in the site I used as an example, the animation plays, and then it disappears and everything is loaded, I didn't have to click anything.



Obviously, that was a little too fast to well illustrate my point, but the animation appeared and went away when the site was done the loading, or so it appears to me.

Maybe it only does that on Chrome?

[Braden]

Ahh, my skillset continues to find new paths of potential growth!! HTML Animations . . .

[Chris M]

I was with Egg in thinking you were referring to the animation as a whole. The part you are wanting is the loading bar. This is determined by whatever software you choose to create the animation. I don't play around with animations, so no idea beyond seeing the option to choose a loading bar in some software (Wondershare?) I was messing with years ago.

[Braden]

I have the animation in gif and css format, I just don't know how to apply it to the website.

[Braden]

Update: The CSS drags and drops into Xara just fine.

The animation works when previewing.

Now I just need to know how to make it and a background picture that will be behind it, disappear when the page is done loading.

[Egg Bramhill]

Does the site need to be a supersite?

Probably not, but your example appears to be of similar construction.

Also, it seems that in the site I used as an example, the animation plays, and then it disappears and everything is loaded, I didn't have to click anything.

I've looked at in three browsers and it's static & doesn't automatically load any new content.

Anyone else seeing this auto page load?