Preloader JS, gif or video?

Question

Layout

The task before loading the site is to make an animation: a flying butterfly all over the screen on a white background, which disappears after the end and the site itself appears.
It seems to be an ordinary preloader, but the entire screen is involved, so the usual GIF will not work.
Making a GIF in full screen is stupid. or make a gif and move it with js.
Or throw it on freelance so that the css3-butterfly is bungled.
Or make a video where the butterfly flies.
Has anyone been in this situation and what is the best way to proceed? How about performance?

Answer 1

Better of course CSS + SVG
gif full screen and the video will be too cumbersome.
And there are plenty of ready-made CSS butterflies, I don’t think that you need to order freelance, you can just “file” it to fit your needs. Here, for example , is a great option , or here, or you can take this one and set the desired trajectory of movement yourself.
Lots of options, use the search

Answer 2

It is better, more correct and more logical to do this:
- open the firebox;
- throw this preloader with a flying butterfly in full screen;
- close the furnace.
The presence of a preloader can only mean one thing: our site is so slow that while the page is loading, you can make yourself tea or watch a butterfly fly. Affect loading speed - no, we can't do that ¯\_(ツ)_/¯
Your page should load so fast that the need for a preloader disappears by itself and the only option to look at it is to deliberately "delay" the page display. But this disease is not fatal and goes away on its own with time.