How to use prelouders

How to use preloaders

The preloaders hosted on this site are a vector saved in json format.

I draw them in illustrator and animate in After Effects Using the Bodymovin plugin, I save it in json format and upload it to the site https://lottiefiles.com. After that I get a code that you can insert into html objects on a Tilda or into sites written from scratch. In general, wherever you can insert the code.

I insert an html object here for example:

INSTRUCTIONS for TILDA

You have created your site.

Then you create a separate page.

You create a zero block on the page.

You go into editing and delete all unnecessary layers.

You set the parameters of the artboard.

Set the background color to whatever you want. During the opening of the page, a preloader will appear on the background of your choice, and after a second or two it will go into transparency, followed by the main color of your site. So you need to choose one that will give a beautiful transition when applying one color to another.

You create a new html element.

You set the following parameters.

Wight and high you set as you want to see your preloader on the page.

Click on the created element. The code editing panel opens. You delete what is already there and paste the code copied on my page.

You check that the dimensions are the way you want your preloader to be.

You save the data in the code editing panel. You go out. You save the changes in the zero block. You go out.

You open the block library and type T123 in the search bar. You create an html block.

You click on content.

In the panel that opens, add the code


1.	<style>
2.	#rec166025753 {
3.	  position: fixed;
4.	  left: 0;
5.	  top: 0;
6.	  right:0;
7.	  bottom:0;
8.	  z-index: 100005;
9.	}
10.	</style>
11.	<script>
12.	$("body").css("overflow","hidden");
13.	$(document).ready(function() {
14.	    setTimeout(function() {
15.	        $("#rec166025753").delay(350).fadeOut('slow'); 
16.	        $("body").css("overflow","");
17.	        window.dispatchEvent(new Event('resize'));
18.	    }, 3000);
19.	});
20.	$(window).on('load', function () {
21.	    $("#rec166025753").delay(350).fadeOut('slow');
22.	    setTimeout(function() {  
23.	    $("body").css("overflow",""); 
24.	    window.dispatchEvent(new Event('resize'));    
25.	    }, 400);
26.	});
27.	</script>

The code is taken from here https://mo-ti.ru/preloader. Thank you very much mo-ti!

You go into the settings of our zero block, in which you inserted the animated preloader code.

And copy the block id at the very bottom of the window that opens.

You need to insert this id into three lines of code from mo-ti, which you inserted into block T123. Second, fifteenth and twenty-first lines.

To set the duration you need to experiment with delay.

Preloader is ready!

Now we need to put it in the right place.

There are two possibilities for its placement.

First:

If the preloader is needed on all pages. Then it can be inserted into the header page, and it will automatically appear in front of all pages of the site. If it is not needed on some pages, you can turn it off in the settings of this page.

Second:

You can copy these two blocks and paste them directly on the pages where you need them.

Only after placing these blocks on a new page, you need to change the id of the preloader block in the code in block T123.

And everything will work ;)