Как в CSS создать анимированные загрузчики страниц
От автора: анимированные загрузчики страниц помогают пользователям быть терпеливыми с инструментом или веб-сайтом. Они дают пользователям понимание, что система работает, сообщают им, сколько времени потребуется для загрузки страницы, и удерживают внимание пользователей, предоставляя им что-то интересное, на что они могут посмотреть.
С помощью некоторых базовых навыков веб-дизайна легко создавать анимации загрузки в CSS. В наши дни на сайтах часто можно увидеть анимированные загрузчики, особенно по мере роста веб-приложений и веб-сайтов React. Это один из многих способов улучшить воспринимаемую производительность приложения или, другими словами, создать впечатление, что сайт загружается быстрее, чем это есть на самом деле.
В этой статье я расскажу о преимуществах анимированных загрузчиков страниц, а затем создам простое вращающееся колесико с помощью CSS, которое вы можете использовать в качестве отправной точки для создания более сложных и информативных загрузчиков.
Что такое загрузчики страниц?
Загрузчик страниц — это компонент веб-страницы, который обеспечивает загрузку страницы при нажатии на ссылку или кнопку. Вы можете добавить различные типы загрузчиков страниц, такие как счетчики, полосы загрузки и анимацию песочных часов.
Загрузчики страниц также функционируют как уведомления, которые уверяют пользователей, что система все еще находится в процессе обработки их запроса. Анимированные загрузчики страниц обычно представляют собой простые анимации, предназначенные для развлечения гостей, пока сервер выполняет обработку.
Это важные элементы веб-страницы, которые нельзя игнорировать в процессе разработки, потому что, если пользователю придется задаваться вопросом, обрабатывается ли его запрос, он будет разочарован.
Почему вам следует использовать загрузчики страниц на своем веб-сайте?
Понятно, что определенные элементы на веб-сайте или в приложении потребуют времени для загрузки. Никто не любит ждать, поэтому вы должны удерживать пользователей в эти миллисекунды. Загрузчики страниц являются неотъемлемой частью воспринимаемой производительности того, как долго что-то загружается, независимо от фактического времени ожидания. Это связано с тем, что они немного отвлекают пользователя во время ожидания, из-за чего кажется, что время идет быстрее.
Загрузчики страниц также могут указать причину, по которой пользователям приходится ждать. Это может уменьшить разочарование, поскольку дает им понятную причину неудобства. Вам не нужно быть слишком точным, но простые утверждения, такие как «пожалуйста, подождите, пока мы загружаем ваш контент» или «мы работаем над загрузкой вашего документа», работают хорошо.
Наконец, загрузчики страниц могут уменьшить разочарование пользователей, указывая, сколько времени осталось ждать. Управление временем формирует ожидания и помогает пользователям терпеливо ждать. Вы можете отобразить значение времени ожидания в процентах или в виде видимого представления прогресса.
Почему CSS — лучший вариант для загрузчиков страниц?
Есть несколько причин, по которым следует использовать CSS при создании загрузчиков страниц. Во-первых, его легко редактировать. Вы можете быстро настроить время, цвет, скорость и другие функции анимации. Во-вторых, с помощью CSS, анимация выполняется быстрее и плавнее, чем, например, с помощью JavaScript. Это связано с тем, что CSS переносит логику анимации в браузер, тогда как скорость анимации JavaScript зависит от используемой библиотеки.
Создание простого анимированного загрузчика страниц с помощью CSS
Хотя может быть довольно заманчиво создать самые модные и крутые загрузчики страниц, мы можем выполнить довольно хорошую работу, используя только CSS. В этом уроке мы будем создавать загрузчик страниц с вращающимся кругом. Давайте начнем. В файл HTML добавьте div и назовите имя класса loader:
Как сделать прелоадер для сайта и спиннер для кнопки?
Страница любого сайта или веб-приложения не загружается мгновенно . На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер . А после того, как страница полностью загрузится его убрать . Основная цель прелоадера — это улучшить впечатление пользователя о сайте.
Как создать прелоадер страницы
На самом деле создать прелоадер очень просто.
Для этого нужно сразу после открывающего тега 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(); });Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Справа сверху выставляем желаемые настройки:
Вход — откуда будет начинаться анимация;
Выход — откуда анимация будет появляться, при переходе на другую страницу;
Скорость — скорость анимации;
Количество — количество слоев;
Easing — плавность анимации;
Откючить_Анимацию_При_Выходе — отключает анимацию выхода с страницы. Эта настройка не отображается в демонстрации, но будет работать у вас на сайте.
Так-же, в вкладке «Цвета» можно изменить цвет каждого отдельного слоя эффекта.
2) Снизу на странице скопируйте код и вставьте его в блок Т123. Вы можете вставить этот блок в шапку, чтобы добавить эффект сразу на все страницы.
Важно: разместите этот блок на самом верху страницы.
Эффект загрузки страницы
Работает как стандартный блок Т228, но с другим эффектом. При входе на страницу, закрывает контент до момента её загрузки, после чего уходит в выбранную сторону. Дальше, при переходе по ссылке, контент закрывается, происходит загрузка и показывается другая страница.
Анимация загрузки страницы в CSS и GIF: назначение, как создать и примеры
Анимация загрузки сайта — это небольшой инструмент, чтобы удержать внимание потенциальных пользователей. Редко какой веб-сайт загружается мгновенно. Обычно на процесс загрузки уходит какое-то время, пока загрузятся скрипты, картинки, стили и др. В момент загрузки всех компонентов страницы она видоизменяется. Этот процесс не всегда очень красивый, поэтому его скрывает анимация загрузки страницы.
По сути, анимация загрузки сайта — это то , что вид ит пользователь, пока веб-сайт загружается. Она представляет собой псевдо страницу, перекрывающую весь экран устройства на время загрузки основной страницы веб-сайта. На этой псевдо страниц е можно отразить что угодно, но обычно на ней показывают какую-нибудь анимированную фигуру. Такая псевдо страница сразу исчезает, когда основная страница сайта загру жается .
Анимация загрузки сайта делается при помощи HTML, CSS и немного JavaScript, также иногда применяют GIF или SVG-картинку.
Анимация загрузки сайта
- на «чистом» CSS;
- при помощи анимированной GIF-картинки;
- при помощи анимированной SVG-картинки.
Анимация загрузки на «чистом» CSS
- animationLoader — это контейнер, занимающий весь экран устройства ; именно он «прикрывает» содержимое страницы;
- animationLoader_low и animationLoader_item — это контейнеры, участвующие в создании анимации при помощи CSS.
Анимация загрузки сайта при помощи SVG-картинки
- код HTML;
- код CSS;
- код JavaScript.
Анимация загрузки страницы при помощи GIF-картинки
Алгоритм действий будет , как и в предыдущих способах , состоять из трех этапо в , но уже с измененным кодом.
HTML-код:
CSS-код:
.animationLoader
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #fff;
z-index: 1001;
>
.animationLoader __image
position: relative;
top: 50%;
left: 50%;
width: 74px;
height: 74px;
margin-top: -42px;
margin-left: -42px;
background: url(‘animationLoader .gif’) no-repeat 50% 50%; /*в ссылке указываете путь до GIF-картинки, расположенной на вашем сайте*/
>
.lanimation_hiding . animationLoader
transition: 0.3s opacity;
opacity: 0;
>
. animation . animationLoader
display: none;
>
JavaScript-код будет точно таким же , как и в первых двух случаях.
Заключение
Анимация загрузки создается несложно. Сложнее всего ее создавать при помощи «чистого» CSS, так как нужно знать технологию применения таблиц стилей для анимации. Анимация загрузки веб-страницы нужна, чтобы скрыть «некрасивую» загрузку основного контента за ширмой из приятных глазу эффектов.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.