Прелоадер: как добавить на страницу экран загрузки

Прелоадер — это экран с анимацией или индикатором, который отображается во время загрузки сайта.

Страницы любого сайта загружаются не мгновенно, а постепенно. На объемных страницах часть контента может быть недоступна до окончания загрузки страницы. Чтобы улучшить впечатление пользователя о сайте, можно скрыть для него процесс загрузки страницы, а вместо него показать небольшую анимацию или индикатор, который автоматически скроется после окончательной загрузки страницы.

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

Рекомендуется добавить прелоадер на страницу:

• если она содержит большой объем контента (изображения, видео, аудио);
• если на ней есть сложные анимации или интерактивные элементы, которым требуется время на загрузку;
• если в аккаунте есть пользователи с медленным интернет-соединением или устройствами с ограниченными ресурсами.

Когда использование прелоадера необязательно:

• если страница содержит минимум контента и загружается быстро;
• если страница простая, статичная и на ней нет сложных элементов, скриптов или анимаций.

1. Прелоадер не обеспечивает более быструю загрузку страницы, а только показывает пользователю, что она в процессе загрузки.
2. Если вы уже используете какой-либо код на странице или в настройках аккаунта, контроль корректности его работы по-прежнему остается на вас, т.к. предсказать поведение стороннего кода после добавления прелоадера не представляется возможным.
3. Специалисты нашей технической поддержки не консультируют по работе стороннего кода и не дают рекомендаций по внесению изменений в примеры кода из статьи.
4. Перед добавлением кода на страницу рекомендуем создать ее копию, добавить на нее код и проверить отображение до и после. После того как вы убедитесь в корректности работы кода, можно добавить его на оригинал страницы.
5. Если пример прелоадера, предоставленный в статье, вам не подходит или информации недостаточно для решения задачи, рекомендуем воспользоваться услугой платной верстки от специалистов GetCourse ↓

Добавить прелоадер на страницу могут:

• владелец аккаунта,
• администратор,
• сотрудник с правом «Может управлять CMS».

Для этого перейдите на страницу и добавьте на нее 3 блока из раздела «Вставка»:

1. HTML.
2. CSS-код.
3. Javascript-код.

HTML-код отвечает за структуру прелоадера и его добавление на страницу.

CSS-код определяет внешний вид прелоадера (цвет, размер, положение на экране), а также описывает анимацию вращения.

JavaScript отслеживает момент загрузки страницы и скрывает прелоадер по ее завершении.

В блок с HTML добавьте следующий код:

<div id="preloader">
    <div class="preloader-animation"></div>
</div>

В блок с CSS добавьте следующий код: 

.lt-block:not(.lt-editing) #preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #fff; /*  фоновый цвет всей страницы в процессе загрузки */
    z-index:999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-animation {     
    border: 5px solid #b7cde3; /* толщина круга и его основной цвет*/
    border-top-color: #2c3e50; /* цвет яркой части круга */    
    height: 50px; /* ширина элемента */
    width: 50px; /* высота элемента */
    animation: rotation 1s linear infinite; /* время одного вращения; можно указать дробное значение, например 0.5s */
    border-radius: 50%;
}

@keyframes rotation {
    to {
        transform: rotate(1turn);
    }
}

При необходимости измените внешний вид прелоадера, используя подсказки, выделенные знаками /*...*/.

В блок JavaScript вставьте следующий код:

$(window).load(function(){
    $('#preloader').fadeOut();
});

Опубликуйте страницу или внесенные изменения.

Готово! Прелоадер добавлен. Проверить его отображение можно в режиме просмотра страницы.

Старый конструктор используется в настройках вида тренинга и на системных страницах. Принцип настройки прелоадера здесь аналогичен — потребуется добавить 3 разных кода.

Чтобы добавить HTML-код в старом конструкторе, используйте соответствующий блок из раздела «Элементы» .

В добавленном блоке нажмите на <> и вставьте следующий код:

<div id="preloader">
    <div class="preloader-animation"></div>
</div>

Чтобы добавить CSS в стили страницы, нажмите на </> и вставьте следующий код. При необходимости измените внешний вид прелоадера, используя подсказки, выделенные знаками /*...*/.

.xdget-block:not(.editable) #preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #fff; /*  фоновый цвет всей страницы в процессе загрузки */
    z-index:999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-animation {     
    border: 5px solid #b7cde3; /* толщина круга и его основной цвет*/
    border-top-color: #2c3e50; /* цвет яркой части круга */    
    height: 50px; /* ширина элемента */
    width: 50px; /* высота элемента */
    animation: rotation 1s linear infinite; /* время одного вращения; можно указать дробное значение, например 0.5s */
    border-radius: 50%;
}

@keyframes rotation {
    to {
        transform: rotate(1turn);
    }
}

Чтобы добавить JavaScript, в конце страницы вставьте соответствующий блок из раздела «Элементы».

Кликните 2 раза на добавленный блок и вставьте следующий код:

$(window).load(function(){
    $('#preloader').fadeOut();
});

Готово! Прелоадер добавлен. Сохраните настройки страницы и проверьте отображение прелоадера в режиме просмотра страницы.

Чтобы вставить прелоадер на все страницы аккаунта, необходимо добавить код в настройках аккаунта.

Доступ к данному разделу имеют:

• владелец аккаунта,
• ответственный администратор.

Для добавления кода:

1. Перейдите в раздел «Профиль» — «Настройки аккаунта» — «Настройки».

2. Вставьте весь следующий код в блок «Дополнительные теги для HEAD»:

<style>
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #fff;
    z-index:999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-animation {
    animation: rotation 1s linear infinite;
    border: 5px solid #b7cde3;
    border-radius: 50%;
    border-top-color: #2c3e50;
    height: 50px;
    width: 50px;
}

@keyframes rotation {
    to {
        transform: rotate(1turn);
    }
}
</style>

<div id="preloader">
    <div class="preloader-animation">
    </div>
</div>

<script>
$(window).load(function(){
    $('#preloader').fadeOut();
});
</script>

3. Сохраните настройки в конце страницы.

Еще больше информации о верстке можно найти в следующей статье → «Оформление стилей элемента с кастомным классом».