Как в CSS создать анимированные загрузчики страниц
С помощью некоторых базовых навыков веб-дизайна легко создавать анимации загрузки в CSS. В наши дни на сайтах часто можно увидеть анимированные загрузчики, особенно по мере роста веб-приложений и веб-сайтов React. Это один из многих способов улучшить воспринимаемую производительность приложения или, другими словами, создать впечатление, что сайт загружается быстрее, чем это есть на самом деле.
В этой статье я расскажу о преимуществах анимированных загрузчиков страниц, а затем создам простое вращающееся колесико с помощью CSS, которое вы можете использовать в качестве отправной точки для создания более сложных и информативных загрузчиков.
Что такое загрузчики страниц?
Содержание статьи:
Загрузчик страниц — это компонент веб-страницы, который обеспечивает загрузку страницы при нажатии на ссылку или кнопку. Вы можете добавить различные типы загрузчиков страниц, такие как счетчики, полосы загрузки и анимацию песочных часов.
Загрузчики страниц также функционируют как уведомления, которые уверяют пользователей, что система все еще находится в процессе обработки их запроса. Анимированные загрузчики страниц обычно представляют собой простые анимации, предназначенные для развлечения гостей, пока сервер выполняет обработку.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это важные элементы веб-страницы, которые нельзя игнорировать в процессе разработки, потому что, если пользователю придется задаваться вопросом, обрабатывается ли его запрос, он будет разочарован.
Почему вам следует использовать загрузчики страниц на своем веб-сайте?
Понятно, что определенные элементы на веб-сайте или в приложении потребуют времени для загрузки. Никто не любит ждать, поэтому вы должны удерживать пользователей в эти миллисекунды. Загрузчики страниц являются неотъемлемой частью воспринимаемой производительности того, как долго что-то загружается, независимо от фактического времени ожидания. Это связано с тем, что они немного отвлекают пользователя во время ожидания, из-за чего кажется, что время идет быстрее.
Загрузчики страниц также могут указать причину, по которой пользователям приходится ждать. Это может уменьшить разочарование, поскольку дает им понятную причину неудобства. Вам не нужно быть слишком точным, но простые утверждения, такие как «пожалуйста, подождите, пока мы загружаем ваш контент» или «мы работаем над загрузкой вашего документа», работают хорошо.
Наконец, загрузчики страниц могут уменьшить разочарование пользователей, указывая, сколько времени осталось ждать. Управление временем формирует ожидания и помогает пользователям терпеливо ждать. Вы можете отобразить значение времени ожидания в процентах или в виде видимого представления прогресса.
Почему CSS — лучший вариант для загрузчиков страниц?
Есть несколько причин, по которым следует использовать CSS при создании загрузчиков страниц. Во-первых, его легко редактировать. Вы можете быстро настроить время, цвет, скорость и другие функции анимации. Во-вторых, с помощью CSS, анимация выполняется быстрее и плавнее, чем, например, с помощью JavaScript. Это связано с тем, что CSS переносит логику анимации в браузер, тогда как скорость анимации JavaScript зависит от используемой библиотеки.
Создание простого анимированного загрузчика страниц с помощью CSS
Хотя может быть довольно заманчиво создать самые модные и крутые загрузчики страниц, мы можем выполнить довольно хорошую работу, используя только CSS. В этом уроке мы будем создавать загрузчик страниц с вращающимся кругом. Давайте начнем. В файл HTML добавьте div и назовите имя класса loader:
<html> <body> <div class=”loader”></div> </body> </html>
| 12345 | <html><body> <div class=”loader”></div> </body></html> |
Теперь используйте CSS селектор класса loader для создания анимации загрузчик. Вы можете определить несколько свойств, таких как цвет, размер и выравнивание:
CSS body{ display: flex; align-items: center; justify-content: center; background-color: white; } .loader{ width: 100px; height: 100px; border-radius: 100px; border-top: 5px solid red; border-left: 3px solid brown; border-bottom: 1px solid purple; border-right: transparent; animation: spinner 0.8s linear infinite; }
| 1234567891011121314151617 | body{ display: flex; align-items: center; justify-content: center; background-color: white;} .loader{ width: 100px; height: 100px; border-radius: 100px; border-top: 5px solid red; border-left: 3px solid brown; border-bottom: 1px solid purple; border-right: transparent; animation: spinner 0.8s linear infinite;} |
В приведенном выше коде мы задаем height и width загрузчика равными 100 пикселей. Поскольку мы делаем вращающийся круг, border-radius также составляет 100 пикселей.
Свойства border-top, border-bottom и border-left определяют размер, стиль и цвет нашего загрузчика. Установка свойства border-bottom создаст отдельную вращающуюся ленточную анимацию. Изменение свойств border-right или -left изменит длину и размер ленты.
Наконец-то у нас есть анимация нашего загрузчика, которая определяет продолжительность, время и итерацию загрузчика. В нашем примере анимация спиннера сделана так, что он движется с одинаковой скоростью от начала до конца в течение 0,8 с в каждом цикле бесконечно:
> animation: spinner 0.8s linear infinite;
| 1 | > animation: spinner 0.8s linear infinite; |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Последнее, что нужно сделать, это установить ключевые кадры анимации. Они покажут, как загрузчик будет отображаться в данный момент во время последовательности анимации:
CSS @keyframes spinner{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
| 12345678910 | @keyframes spinner{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }} |
В нашем примере определены два ключевых кадра. Первый происходит при 0%, что является первой частью последовательности анимации. Затем загрузчик поворачивается на ноль градусов.
Второй ключевой кадр соответствует масштабу 100%, что является последней частью последовательности анимации.
Затем загрузчику устанавливается вращение на 360 градусов, так что анимация вращения начинается в верхней части круга и завершает полный оборот, чтобы сделать круг за 0,8 с.
Поздравляем! Теперь вы знаете, как создать простой, но отличный загрузчик страниц с эффектом загрузки, используя только HTML и CSS.
Дополнительные примеры загрузчиков страниц
Отображение продолжительности
Анимация продолжительности загрузки определяет, сколько времени потребуется странице для загрузки или получения запроса. Она может быть выражена определенным процентом, временем загрузки или числом. Ее также можно представить визуально, например, в виде вращающегося круга или заполняющейся полосы.
Бесконечная анимация
Бесконечная анимация — пример неопределенного индикатора. Он просит пользователя подождать, не указывая, как долго. Ее можно использовать, когда период ожидания неизвестен или очень короткий.
Пользовательская анимация
Забавные анимации обычно представляют собой загрузчики SVG, напрямую добавляемые на веб-сайты. Эти анимации иногда сложно создать, используя только CSS. Такие загрузчики привлекают внимание пользователя и делают его время ожидания более комфортным.
Некоторые библиотеки JavaScript помогают быстро создавать эти анимации, например p5.js, GraphicsJS, D3.js и многие другие.
Причина ожидания загрузки
Некоторые загрузчики сообщают нам причину ожидания мелким текстом. Они эффективны для удержания пользователей на сайте. Например, загрузчики могут сообщить вам, на каком этапе находится процесс: «извлечение данных», «подключение к одноранговым узлам» и «удаление файлов». Эта информация помогает общаться с пользователем и получать надлежащий уровень понимания.
Заключение
При разработке веб-сайта вы должны учитывать все детали пользовательского интерфейса. Наличие хорошего веб-сайта не поможет, если время загрузки слишком велико, а половина пользователей уходит еще до того, как они увидят сам сайт.
Чтобы этого не произошло, стоит добавить на сайт интересные анимированные загрузчики, чтобы удерживать внимание пользователя столько времени, сколько необходимо, пока весь контент не загрузится. Добавьте креатива и создайте забавный GIF для загрузчика, который понравится каждому пользователю!
Автор: Sharvari Raut
Источник: webformyself.com