Кастомный прелоадер Lite из ZERO Block

Модификация для Tilda. Прелоадер для сайта из Zero блока. Показываем его пока не загрузится страница. Это Lite версия предлоадера, в скором времени опубликуем версию Pro с большим количеством настроек.

Заказать внедрение

Обсудить проект

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

Дизайн концепция

Preloader на многих сайтах используется исключительно для создания прикольного визуального эффекта.

Тяжелый сайт

Когда у вас на сайте много стороннего кода, тяжелые картинки или есть какая-то сложная анимация, можно использовать прелоадер, что дать дополнительное время на загрузку страницы.

Пример работающей модификации

Работу модификации вы видели, когда загружалась страница.
Чтобы увидеть ее еще раз, можно перезагрузить страницу или нажать на кнопку ниже.

Показать Preloader еще раз

Инструкция по внедрению модификации

1

Создаем Zero Block с анимацией

Блок надо растянуть 100% высоты. Анимацию можно делать любую, как gif/svg, так и step-by-stap.
Для корректной работы, лучше всего все это делать в header или footer блоках, которые есть у вас на каждой странице.

2

Блоку с прелоадером задаем кастомный css класс

В примере у блока класс "uc-preloader". Мы можете назвать также или вообще скопировать изначальный id этого блока и вставить в код #rec[соответствующий id], но лучше не выебывайтесь.

3

Копируем код и вставляем его в блок T123

4

В коде вставляем класс блока с прелоадером и настраиваем время

В форме делаем выпадающий список, задаем варианты в соответствии с названиями тарифов (можно добавить и прочие) и даем ему имя переменной.

5

В коде можно выбрать будет ли появляться блок один раз за сессию или каждый раз при открытии страницы

Скопировать код

<!-- Samand.studio | Кастомный прелоадер Lite из ZERO Block -->
<script type="text/javascript">


//Названия классов
let preLoaderClass = 'uc-preloader'; //класс блока c preloader
let preLoaderTimer = 3000; //время работы прелоадера
let preLoaderTimerClose = 1000; //время скрытия прелоадера
let oneImpression = true; //Выбрать true / false. Показывать прелоадер только при первом посещении после закрытии предыдущей вкладки (true) или каждый раз при загрузке страницы (false)


funcPreLoader(preLoaderClass, preLoaderTimer, preLoaderTimerClose, oneImpression);

function funcPreLoader (preLoaderClass, preLoaderTimer, preLoaderTimerClose, oneImpression) {
    window.onbeforeunload = () => {localStorage.removeItem('lastVisit')};
    let preloader = document.querySelector('.'+ preLoaderClass);
    if (document.querySelector('.'+ preLoaderClass)) {
        if (oneImpression) {
            if (localStorage.getItem('lastVisit') == null) { funcPreLoaderInnit(preloader) }
            else { preloader.style.display = 'none' }
        } else { funcPreLoaderInnit(preloader) }
    } else { return }
}


function funcPreLoaderInnit (preloader) {
    preloader.classList.add('preloader_active')
    document.body.style.overflow = 'hidden'
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout (function () {
            fadeOut(preloader, preLoaderTimerClose, 'preloader_active')
            document.body.style.overflow = ''
            window.dispatchEvent(new Event('resize'))
        }, preLoaderTimer)
    })
    localStorage.setItem('lastVisit', 'yes')
}

let fadeOut = (el, timeout, classremove) => {
    el.style.opacity = 1
    el.style.transition = `opacity ${timeout}ms`
    el.style.opacity = 0
    setTimeout(() => { el.style.display = 'none'; el.classList.remove(classremove); }, timeout)
}
</script>

<style>
    .preloader_active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000000011;
    }
</style>

Как вам модификация?

Кастомный прелоадер Lite из ZERO Block

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

Пример работающей модификации

Инструкция по внедрению модификации

Заказать внедрение модификации