Что такое прелоадер?
Прелоадер – это экран загрузки, который отображается перед загрузкой основного содержимого сайта. Обычно он используется для визуальной обратной связи с пользователем о том, что сайт загружается, и для индикации хода загрузки. Предзагрузчики могут быть простыми, например, вращающийся значок загрузки, или более сложными, например, анимация или видео.
Прелоадер может улучшить пользовательский опыт, предоставляя визуальную обратную связь о том, что сайт загружается, помогая сократить воспринимаемое время загрузки. Он также может использоваться для загрузки ресурсов, необходимых для первоначальной визуализации сайта, таких как шрифты и изображения, до того, как пользователь сможет взаимодействовать с сайтом. Это может улучшить производительность сайта за счет сокращения времени, которое требуется пользователю, чтобы начать взаимодействие с сайтом. Кроме того, прелоадер можно использовать для создания более отполированного и профессионального вида сайта.
Если вы используете collabza, то прелоадер вам 100% нужен, ибо иногда пользователь видит шаблонный блок, а только потом, секунды через 2, подгружается нужная информация. Правда, чтобы сделать качественный прелоадер для интеграций с сервисов collabza, нужно знать код. В этой же статье мы рассмотрим наиболее простое решение.
Как сделать прелоадер из Zero-блока
Предлагаю разбить работу на несколько простых шагов:
- Создать и подготовить Zero-блок.
- Добавить элемент, обозначающий загрузку.
- Вставить код
1. Создать и подготовить Zero-блок
Как нетрудно догадаться из названия, вам необходимо создать Zero-блок. Далее удаляете все эелементы внутри, обязательно задаёте фон или создаёте shape с фоном/изображением и растягиваете его на 100% по ширине и по высоте окна (не Grid container, а именно Window container). Сам артборд также растягиваете на 100% по высоте экрана (настройка Window container height). Должно быть как на скриншоте:
2. Добавить элемент, обозначающий загрузку
Вы можете добавить любой элемент (видео, gif, изображение), но для простоты предлагаем создать обычный Shape, задать ему размеры 200px на 200px и разместить по центру (лучше всего относительно окна, т.е. Window container: center center с коррдинатами 0, 0). Можете просто повторить настройки как на скриншоте:
Создаём анимацию
Далее пролистайте настройки элемента в самый низ и добавьте SBS-анимацию (Step-by-step), нажав кнопку Add. Выберите событие (Event) «элемент на экране» (element on Screen), зацикленность (Loop) с настройкой «Loop», а остальные настройки оставьте как есть. Следом добавьте шаг для анимации. В настройках шага просто переместите бегунок в настройке вращения (Rotate) до конца влево или вправо. Также можете просто вручную прописать значение -360 или 360. Таким образом за 1 секунду наш квадрат совершит 1 оборот на 360 градусов. Если значение вращения отрицательное, то вращение будет происходить против часовой стрелки, если положительное, то по часовой. Можете скопировать все настройки анимации со скриншота:
Если хотите, чтобы квадрат вращался быстрее или медленнее, «поиграйтесь» с настройкой продолжительности анимации (Duration).
Пояснение происходящего
Теперь давайте напишем текст, который будет объяснять пользователю, что вообще тут происходит. Добавьте текстовый элемент и напишите, например, «Загрузка...». Разместите текст точно также, как и сам Shape: по центру Window container. Вот, как это должно выглядеть:
Не забудьте адаптировать и сохранить
Обязательно адаптируйте свой прелоадер для каждого экрана. И не забудьте сохранить полученный результат.
3. Вставить код
Осталось дело за малым. Выходите из Zer-блока, добавляйте под него новый блок – T123 («HTML-код» из раздела «Другое»), а в контент блока вставляйте следующий код:
<!-- Простой прелоадер из Zero-блока | https://necodim.ru/journal/tpost/4j44h3ben1-prostoi-preloader-iz-zero-bloka -->
<script>
const preloaderID = '#rec123456789'; // ID вашего Zero-блока с прелоадером const time = 2000; // время, через которое прелоадер пропадёт в миллисекундах $(function() {
setTimeout(() => {
$(preloaderID).fadeOut(300);
setTimeout(() => { $(preloaderID).remove() }, 300);
}, time);
});
</script>
<style>
/* ID вашего Zero-блока с прелоадером */ #rec123456789 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999999999;
}
</style>
Скопировать код
Не забудьте поменять ID (#rec123456789 в 4 и 16 строке) в коде на ID своего только что созданного Zero-блока с прелоадером. Если захотите изменить время, через которое прелоадер должен скрываться, измените значение time в коде (5 строка). Время указывается в миллисекундах (1 секунда = 1000 миллисекунд). Должно получиться вот так:
Публикуйте страницу и наслаждайтесь результатом. Чтобы прелоадер работал на всех страницах, разместите его в шапке (Header) сайта. Если хотите разместить только на одной странице, размещайте блок и код в самом верху страницы.
Итоги
Хоть, статья получилась довольно-таки длинная, зато, наглядная и, как вы могли заметить, простая в восприятии. Здесь нет ничего сложного; сделать подобное можно буквально за 2 минуты. Попробуйте и вы. И напишите в комментариях, как вам такая идея? Стоит ли писать ещё такие простые и быстрые советы?
