Кастомный прелоадер
(эффект загрузки страницы)

У Тильды есть блок прелоадера T228! Но настроек там с гулькин нос. А время загрузки вы выставляете самостоятельно. Хотя на самом деле страница может загружаться у кого-то быстрее, а у кого-то дольше. Одно и то же время всем не подойдёт, нужно предусмотреть эти варианты. Поэтому мы сделали прелоадер на все случаи жизни:

Топорный вариант с временем, после которого прелоадер исчезнет.
Продвинутый, когда прелоадер исчезает только после полной загрузки контента (все каталоги, зеро-блоки и сама страница). Учтите, что загрузка картинок в любом случае зависит от ваших настроек Lazy Load.
Для пользователей, использующих Collabza, т.к. её загрузка происходит обычно дольше, чем всё из п. 2.
Маленькая хитрость для пользователей Collabza, у которых больше одной интеграции на странице. Узнать о ней можно только из видео с инструкцией.

Все прелоадеры разработаны vineethtrv (репозиторий: css-loader). Поддержать автора и оставить отзыв можно на ProductHunt.

Как пользоваться модификацией:

Выберите вариант работы прелоадера в форме ниже.
Укажите скорость исчезания (эффект fade out) прелоадера в миллисекундах.
Если выбрали «По таймеру», то укажите, через сколько миллисекунд нужно выключить прелоадер.
Если выбрали «После полной загрузки страницы», то укажите, какие блоки используются на вашей странице.
Если выбрали «После загрузки Collabza», то вставьте ID блока с интеграцией.
Перейдите на сайт с выбором прелоадера и нажмите на понравившийся.
Скопируйте HTML-код (чаще всего это <span class="loader"></span>) и вставьте в соответствующее поле формы с настройками.
Скопируйте CSS-код и также вставьте в соответствующее поле.
Скопируйте полученный код и вставьте в блок T123. Сам блок разместите в самом низу страницы.
Если не хотите, чтобы указатель мыши менялся на прелоадере на указатель загрузки, то удалите из css-свойства #preloader самую последнюю строчку: cursor: progress;.
Чтобы изменить цвет прелоадера, посмотрите вставленный CSS и найдите там цвета. Поменяйте их на предпочтительные. Как это сделать, описано в видео.

<!-- Кастомный прелоадер (эффект загрузки страницы) | https://necodim.ru/tilda/preloader --> <div id="preloader"><span class="loader"></span></div> <script> document.body.style.overflow = 'hidden';
const loader = () => {
    document.body.style.overflow = '';
    const preloader = document.getElementById('preloader');
    const fadeout = setInterval(() => {
        const opacity = getComputedStyle(preloader).opacity;
        opacity > 0 ? preloader.style.opacity = opacity - 0.05 : (clearInterval(fadeout), preloader.remove());
    }, 15);
} const necodimLoadingArray = new Array();
const necodimPageReady = () => {
    let conditionDom = necodimLoadingArray.indexOf('dom') !== -1;
    let conditionShop = document.querySelectorAll('.js-store-grid-cont').length ? necodimLoadingArray.indexOf('store') !== -1 : true;
    let conditionZero = document.querySelectorAll('.t396__artboard').length ? necodimLoadingArray.indexOf('zero') !== -1 : true;
    conditionDom && conditionShop && conditionZero ? loader() : false;
}
document.addEventListener('DOMContentLoaded', () => (necodimLoadingArray.push('dom'), necodimPageReady()));
document.querySelectorAll('.js-store-grid-cont').forEach(catalogGrid => catalogGrid.addEventListener('tStoreRendered', () => (necodimLoadingArray.push('store'), necodimPageReady())));
document.querySelectorAll('.t396__artboard').forEach(artBoard => artBoard.addEventListener('artBoardRendered', () => (necodimLoadingArray.push('zero'), necodimPageReady()))); </script> <style> #preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    opacity: 1;
    background-color: #222222;
    overflow: hidden;
    cursor: progress;
}
 </style>