Экран загрузки на javascript

Как сделать экран загрузки (preloader) на сайте на JavaScript?

Preloader – это некая заставка, которая показывается пользователю до тех пор, пока ваш сайт полностью не прогрузился.

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

В качестве такого окна загрузки может быть как картинка или однотонный фон, так и небольшая анимация.

Основная идея работы этого окна – показываться сразу при открытии сайта и скрытие его при полной загрузке.

Реализацию такого окна я предлагаю вам на JavaScript.

Перед закрывающим тегом на нужных страницах вашего сайта вставьте код:

Здесь, как вы заметили, мы прописали и стили, чтобы загрузка стиля окна никак не зависела от подгружаемых файлов.

По виду это окно будет выглядеть следующим образом:

По желанию вы можете сменить стиль оформления.

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

Источник

Как сделать прелоадер для сайта и спиннер для кнопки?

Страница любого сайта или веб-приложения не загружается мгновенно . На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер . А после того, как страница полностью загрузится его убрать . Основная цель прелоадера — это улучшить впечатление пользователя о сайте.

Как создать прелоадер страницы

На самом деле создать прелоадер очень просто.

Для этого нужно сразу после открывающего тега 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 картинку.

.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:

$(window).on('load', function() { $('.preloader').fadeOut().end().delay(400).fadeOut('slow'); });

Кнопка отправки со спиннером

Рассмотрим создание формы, работающей через AJAX. При её отправке будем переводить кнопку type=»submit» в состояние disabled и показывать спиннер. Спиннер будем отображать до тех пор пока не прийдет ответ от сервера. Тем самым спиннер будет указывать что действие все ещё выполняется и оно не завершено.

1. Отправка формы с использованием XMLHttpRequest:

   
. Отправить 
  

2. Отправка формы с использованием Fetch:

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(); });

Источник

Делаем прелоадер для вашего сайта

Приветствую, сегодня покажу вам, как сделать прелоадер для вашего сайта. Preloader служит для того, что бы улучшить у пользователя впечатление о сайте. Ведь страница не загружается мгновенно. Картинки грузятся долго, во время их прогрузки сайт будет «прыгать». Так же нужно время для загрузки шрифтов, во время чего сайт так же будет постоянно видоизменятся. Поэтому намного лучше на время загрузки сайт скрыть, и показать пользователя приятную анимацию. После загрузки, просто скрываем его, и пользователь видит сразу красивый, плавный сайт. Этот момент очень сильно улучшает восприятие.

Базовая структура

Для начала, создадим базовую HTML структуру. Рекомендую помещать preloader сразу после открывающего тега . Так как я буду использовать gif-изображение, то и HTML структура максимально простая: (если вы хотите использовать CSS Preloader, просто поместите его код вместо тега )

Далее пишем CSS код, для того, что бы скрыть всю страницу, и отцентровать его.

Скрываем прелоадер после загрузки (чистый 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 и написать этот код:

Спасибо, что прочитали. Если у вас остались любые вопросы, задавайте их в комментариях, всем помогу. Так же буду благодарен, если вы прочитаете другие мои статьи:

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Источник