Как сделать прелоадер с процентами загрузки в TILDA?

С помощью нашей модификации ты можешь сделать прелоадер в Zero Block Тильда, с процентами загрузки и настроить время показа

Время настройки: 2 минуты

Генератор кода

Видео инструкция

Инструкция

1. Копируем Id Зеро Блока, из которого делаем прелоадер и вставляем в генератор;

2. Добавляем свой текстовый элемент в Зеро Блок, в котором будет значение от 0 до 100 и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс что и в генераторе;

3. Прописываем текст после текстового элемента, к примеру "%"

4. Если нужно, указываем текстовый элемент с точками и указываем класс к нему и прописываем его в генераторе и текст до точек загрузки;

5. В случае если сайт тяжелый, вы можете указать в первом шаге время загрузки от 0 до указанного значения и во втором шаге время от первого указанного значения до второго;

6. Копируем сгенерированный HTML код и вставь его в блок Т123;

ВАЖНО:

Если сайт "легкий" то настойки времени не сработают, можете указать любые, сайт загрузится быстро;
Код для прелоадера нужно поставить в самом верху страницы, сам Зеро Блок с прелоадером под ним;
Если это много страничный сайт и в хедере есть меню, нужно поставить этот прелоадер и код выше меню, иначе при загрузке меню будет показываться ненадолго, будет проявляться;

Копировать код<!-- Как сделать прелоадер с процентами загрузки в TILDA? -->
<!-- https://nolim.cc/preloader-s-protsentami -->
<script> var wload=0, wfirst=15, wfirstp=70, wsec=20, wsecp=93, recid="#rec307848211", i=1, gg=0, pt=0, wloadc="preloadpercent"; function pretext() { var o="Загрузка", t="wpreloadertext"; wload<=100&&setTimeout(function() { 0==pt?($("."+t+" .tn-atom").html(o+"."), pt=1):1==pt?($("."+t+" .tn-atom").html(o+".."), pt=2):2==pt&&($("."+t+" .tn-atom").html(o+"..."), pt=0), pretext() } , 400) } function myLoop3() { 1==gg&&setTimeout(function() { (wload+=1)>=100&&(wload=100), $("."+wloadc+" .tn-atom").html(wload+"%"), wload<100?myLoop3():($("."+wloadc+" .tn-atom").html("100"), $(recid).delay(0).fadeOut(), $("body").css("overflow", "auto")) } , 8) } function myLoop2() { 0==gg&&setTimeout(function() {  if(gg == 0) { let o=(wsecp-wfirstp)/wsec; o=o<1?Math.ceil(o):Math.round(o), wload+=o, $("."+wloadc+" .tn-atom").html(wload+"%"), wload<=wsecp&&myLoop2() } }, 1000) } function myLoop() { 0==gg&&setTimeout(function() {  if(gg == 0) { let o=wfirstp/wfirst; o=o<1?Math.ceil(o):Math.round(o), wload+=o, $("."+wloadc+" .tn-atom").html(wload+"%"), wload<=wfirstp?myLoop():myLoop2() } }, 1000) } pretext(), myLoop(), $("."+wloadc+" .tn-atom").html(wload+"%"), $(recid).show(), $(document).ready(function () { setTimeout(function() { gg = 1, myLoop3() }, 3000); }); </script> <style> #rec296076873{position:fixed;left:0;top:0;right:0;bottom:0;z-index:100005} </style>