Делаем прелоадер для вашего сайта
Приветствую, сегодня покажу вам, как сделать прелоадер для вашего сайта. Preloader служит для того, что бы улучшить у пользователя впечатление о сайте. Ведь страница не загружается мгновенно. Картинки грузятся долго, во время их прогрузки сайт будет «прыгать». Так же нужно время для загрузки шрифтов, во время чего сайт так же будет постоянно видоизменятся. Поэтому намного лучше на время загрузки сайт скрыть, и показать пользователя приятную анимацию. После загрузки, просто скрываем его, и пользователь видит сразу красивый, плавный сайт. Этот момент очень сильно улучшает восприятие.
Базовая структура
Для начала, создадим базовую HTML структуру. Рекомендую помещать preloader сразу после открывающего тега . Так как я буду использовать gif-изображение, то и HTML структура максимально простая: (если вы хотите использовать CSS Preloader, просто поместите его код вместо тега )
Далее пишем CSS код, для того, что бы скрыть всю страницу, и отцентровать его.
#preloader
Скрываем прелоадер после загрузки (чистый JavaScript)
window.onload = function() < let preloader = document.getElementById('preloader'); preloader.classList.add('hide-preloader'); setInterval(function() < preloader.classList.add('preloader-hidden'); >, 990); >Так же необходимо добавить несколько строк CSS кода для плавности (ниже распишу для чего конкретно)
#preloader.hide-preloader < animation: hidePreloader 1s; >#preloader.preloader-hidden < display: none; >@keyframes hidePreloader < 0% < opacity: 1; >100% < opacity: 0; >>Как это работает?
При помощи window.onload, мы проверяем, загружена ли страница. После загрузки — исполняем написанный ниже код. Создаем переменную, в которую помещаем div с id=’preloader’. После чего, добавляем к этому элементу класс ‘hide-preloader’. Как видно из CSS кода, при добавлении класс запускает анимацию, в которой уменьшает непрозрачность элемента с 1 до 0 за 1 секунду. После анимации прелоадер уже не будет виден, и на этом можно было и закончить, но возникает проблема. Элемент никуда не исчез, а так и покрывает всю страницу, находясь НАД всеми элементами. Это значит, что все элементы ПОД ним не интерактивны (тоесть все ссылки/формы/кнопки работать не будут). Для этого, после загрузки страницы мы запускаем таймер на 990 секунду (немного короче анимации). После окончания таймера, мы добавляем класс ‘preloader-hidden’ к элементу, окончательно скрывая его со страницы. Вы можете подумать, что можно было просто скрыть элемент, с помощью display: none. Это так, но тогда элемент пропадает очень резко, так как display: none — нельзя анимировать.
И вот результат:
Скрываем прелоадер с помощью jQuery
В этом случае нам не нужно добавлять CSS классы и т.д. Только подключить jQuery и написать этот код:
$(document).ready(function() < $('#preloader').fadeOut(400); >);Спасибо, что прочитали. Если у вас остались любые вопросы, задавайте их в комментариях, всем помогу. Так же буду благодарен, если вы прочитаете другие мои статьи:
Семенюк Назарий
Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)
Как сделать прелоадер
Привет, друзья. Бывает такое, что из-за использования тяжелых плагинов и сайт грузиться непозволительно долго. В таких случаях я рекомендую избавляться от них, либо искать менее «тяжелый» аналог. Но иногда — его просто нет. В таком случае можно попробовать использовать прелоадер, чтобы немного развлечь (отвлечь) пользователя. Но не все знают, как подобный функционал реализовать.
Первым делом стоит упомянуть, что использование прелоадера целесообразно в случаях, когда долго грузится главный экран или тогда, когда контент грузится кусками. Все это может привести либо к мгновенному уходу пользователя с сайта, либо к негативному впечатлению о компании вцелом.
Как сделать прелоадер для landing page
Прежде чем начать делать preloader, нужно немножко уяснить суть того, как браузер загружает страницу. Не буду расписывать весь цикл, так как у самого довольно абстрактное представление, но важно понять, что в целях экономии времени, браузер грузит (отображает) код поэтапно и не дожидается полной загрузки страницы, а в случае подключения js, так вообще прекращает загрузку, пока не выполнит подключаемый файл. Это значит, что загрузка (отображение) остального контента приостанавливается до полной загрузки js файла. В общем, проблем достаточно, давайте теперь попробуем их решить при помощи прелоадера.
Теперь пару слов для понимания того, что мы делаем:
- В самом начале размещаем div c прелоадером
- Скрываем прелодером содержимое сайта до момента полной загрузки страницы
- Скрываем прелоадер и показываем страницу
Теперь, сразу после открытия тега body разместим следующий div:
Скорее всего, если у вас проблемы с загрузкой сайта, значит у вас много качественных изображений и различных тяжеловесных скриптов, а значит, вы наверняка используете и jQuery, поэтому для того, чтобы наш preloader исчез после того, как загрузится основное содержимое, воспользуемся следующим скриптом:
Размещайте его где-нибудь после подключения jQuery.
Немного поясню html. LoaderArea — фоновая область, которая перекрывает основной контент. CSS этого дива такой:
.loaderArea
Loader — это активная область (сам прелоадер). Так как я решил делать его при помощи только CSS, то у него такие стили:
.loader < height: 40px; width: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; >.loader:before, .loader:after < content: ""; height: 40px; width: 40px; border: 8px solid rgba(255,255,255,.5); border-radius: 10px; position: absolute; top: 0; >.loader:before < animation: animate 2s infinite linear; >@keyframes animate < 0% < transform: rotate(0) skew(0); >100% < transform: rotate(180deg) skew(360deg); >> .loader:after < animation: animate2 2s infinite linear; >@keyframes animate2 < 0% < transform: rotate(0) skew(0); >100% < transform: rotate(-180deg) skew(-360deg); >>
Исходник прелоадера я взял с Codepeen. Вот ссылки на несколько интересных вариантов:
А вы пользуетесь прелоадереми на своих сайтах. Я вот, впервые его использовал. Какие у вас интересные примеры есть?
Как сделать прелоадер для сайта и спиннер для кнопки?
Страница любого сайта или веб-приложения не загружается мгновенно . На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер . А после того, как страница полностью загрузится его убрать . Основная цель прелоадера — это улучшить впечатление пользователя о сайте.
Как создать прелоадер страницы
На самом деле создать прелоадер очень просто.
Для этого нужно сразу после открывающего тега body добавить код (HTML структуру прелоадера). С помощью CSS его необходимо настроить так, чтобы он занимал всю область viewport и находился над содержимым страницы. В качестве прелодера обычно используют анимированную картинку (svg, gif), или CSS-анимацию.
В процессе загрузки страницы её контент находится под прелодером. Пользователь видит только анимированную картинку.
После полной загрузки прелоадер необходимо скрыть. Чтобы это осуществить необходимо написать очень маленький скрипт. Это можно выполнить как на чистом JavaScript, так и с использованием библиотеки jQuery .
Прелоадер на чистом CSS
Этапы создания прелодера на чистом CSS:
1. Добавить после открывающего тега body следующий HTML-код:
Элемент .preloader – это контейнер, который будет занимать всю область просмотра и находится над содержимым страницы. .preloader__row и .preloader__item – необходимы для создания CSS-анимации, которую отобразим в центре viewport.
2. Создать следующие стили:
.preloader { /*фиксированное позиционирование*/ position: fixed; /* координаты положения */ left: 0; top: 0; right: 0; bottom: 0; /* фоновый цвет элемента */ background: #e0e0e0; /* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */ z-index: 1001; } .preloader__row { position: relative; top: 50%; left: 50%; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; text-align: center; animation: preloader-rotate 2s infinite linear; } .preloader__item { position: absolute; display: inline-block; top: 0; background-color: #337ab7; border-radius: 100%; width: 35px; height: 35px; animation: preloader-bounce 2s infinite ease-in-out; } .preloader__item:last-child { top: auto; bottom: 0; animation-delay: -1s; } @keyframes preloader-rotate { 100% { transform: rotate(360deg); } } @keyframes preloader-bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; }Размещение прелоадера над контентом осуществляется посредством задания ему фиксированного позиционирования и CSS-свойства z-index .
3. Вставить сценарий, который будет добавлять к элементу body класс loaded после полной загрузки страницы:
Этот скрипт очень резко скрывает прелоадер. Чтобы этот процесс улучшить, а именно выполнить это с анимацией можно использовать вместо вышеприведённого сценария этот:
Прелоадер в виде анимированной svg иконки
Процесс создания прелоадера в виде анимированной svg иконки не будет сильно отличаться от примера с использованием CSS-анимации.
1. Создадим HTML-разметку прелоадера и разместим её сразу же после открывающего тега body :
В качестве svg можно использовать любое другое изображение.
.preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; /* фоновый цвет */ background: #e0e0e0; z-index: 1001; } .preloader__image { position: relative; top: 50%; left: 50%; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; text-align: center; animation: preloader-rotate 2s infinite linear; } @keyframes preloader-rotate { 100% { transform: rotate(360deg); } } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; }3. Поместим на страницу следующий сценарий:
Этот сценарий на чистом JavaScript. Но его можно написать с использованием библиотеки jQuery.
В этом случае он будет выглядеть следующим образом:
Пример прелоадера с градиентным фоном:
Прелоадер с использованием анимированной gif картинки
В качестве изображения можно использовать не только svg, но и gif картинку.
CSS для прелоадера:
.preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; z-index: 1001; } .preloader__image { position: relative; top: 50%; left: 50%; width: 64px; height: 64px; margin-top: -32px; margin-left: -32px; background: url('preloader.gif') no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/ } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; }Небольшая коллекция анимированных gif-изображений имеется в этом архиве.
Вариант прелоадера с использованием jQuery функции fadeOut
Пример скрипта нв jQuery для скрытия прелоадере с использованием функции fadeOut:
JavaScript
$(window).on('load', function() { $('.preloader').fadeOut().end().delay(400).fadeOut('slow'); });Кнопка отправки со спиннером
Рассмотрим создание формы, работающей через AJAX. При её отправке будем переводить кнопку type=»submit» в состояние disabled и показывать спиннер. Спиннер будем отображать до тех пор пока не прийдет ответ от сервера. Тем самым спиннер будет указывать что действие все ещё выполняется и оно не завершено.
1. Отправка формы с использованием XMLHttpRequest:
2. Отправка формы с использованием Fetch:
JavaScript
async function sendForm() { try { document.forms.user.querySelector('[type="submit"]').disabled = true; document.forms.user.querySelector('.submit-spinner').classList.remove('submit-spinner_hide'); let response = await fetch(document.forms.user.action, { method: 'post', body: new FormData(document.forms.user) }); document.forms.user.querySelector('[type="submit"]').disabled = false; document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide'); if (response.ok) { let result = await response.json(); } } catch (error) { document.forms.user.querySelector('[type="submit"]').disabled = false; document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide'); console.log(error); } } // при отправке формы document.forms.user.addEventListener('submit', (e) => { e.preventDefault(); sendForm(); });Как добавить прелоадер на сайт
Прелоадер — это индикатор загрузки, который показывается на сайте, пока основной контент еще не загрузился. В этой статье мы рассмотрим, как добавить прелоадер на ваш сайт с помощью простого HTML, CSS и JavaScript кода.
1. Создание HTML-структуры
Для начала, создайте HTML-структуру прелоадера. Обычно прелоадер представляет собой блок с анимированным изображением или текстом. В этом примере мы будем использовать анимацию на основе CSS.
Пример прелоадера
2. Написание CSS-стилей
Теперь перейдите к стилизации прелоадера с помощью CSS. В этом примере мы создадим анимацию вращения.
/* styles.css */ #preloader < position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; display: flex; justify-content: center; align-items: center; z-index: 9999; >.spinner < width: 50px; height: 50px; border: 5px solid #cccccc; border-top-color: #1a1a1a; border-radius: 50%; animation: spin 1s linear infinite; >@keyframes spin < 0% < transform: rotate(0deg); >100% < transform: rotate(360deg); >>
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
3. Добавление JavaScript
Наконец, добавьте JavaScript код, который будет отслеживать загрузку контента на вашем сайте и скрывать прелоадер после полной загрузки.
// script.js window.addEventListener('load', function () < var preloader = document.getElementById('preloader'); preloader.style.display = 'none'; >);
Теперь у вас есть прелоадер, который будет отображаться на вашем сайте, пока основной контент загружается. ��
Не забудьте проверить ваш сайт на разных устройствах и браузерах, чтобы убедиться в корректной работе прелоадера. Удачи в веб-разработке!