Анимация ожидания загрузки/обновления, используя CSS3

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах — это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай — это обновление части шаблона, используя ajax. В конце рассмотрим дополнительно менее распространенный случай — визуализацию в контейнере при ожидании загрузки картинки браузером.

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

У нас есть набор из двух HTML контейнеров: div.button — это кнопка, при нажатии на которую производиться обновление содержимого контейнера div#view.

При нажатии на кнопку происходит ajax запрос. В этом примере я использую jQuery.ajax(). Данные в моём примере возвращаются, упакованные json. Я возвращаю с сервера массив из двух элементов, запрашивая некоторый адрес /ajax-request. Первый элемент [0] содержит HTML код — результат работы, а второй [1] — логический код состояния, где ‘OK’ — означает успешное выполнение.

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

Ближе к сути

Длинное вступление позволяет более предметно продолжить разговор.

Что должно происходить после нажатия на клавишу? Пока идет загрузка контента пользователь должен видеть анимацию ожидания. Когда данные получены, анимация должна прекратиться. Я предлагаю рассмотреть вариант, когда в начале мы имеем кнопку, оформленную картинкой, которая выглядит, например, вот так:

reload

Эти две стрелки легко анимировать, придав им вращение. Для этого опишем дополнительный CSS класс для состояния «ожидание загрузки».

Мы поворачиваем фоновую картинку кнопки линейно.

А javascript код потребует добавлять и убирать класс .loading для контейнера кнопки.

Визуализация ожидания загрузки картинки браузером

Как и обещал, делюсь небольшой идеей на сей счет. Когда сайт должен показать в первый раз много картинок, что типично при загрузке ветки каталога с картинками товара, или изображений в портфолио, то загрузка картинок может, что называется, запаздывать. Выглядит это не очень красиво. Что можно сделать, не прибегая к каким то экзотическим методам?

Самая простая идея — выложить по центру картинки в виде фона анимацию загрузки.

ttl-64

CSS можно использовать следующий:

Идея простая, а реализация ещё проще. Никаких скриптов, pure CSS. :)

Написать комментарий

Мало букафф? Читайте есчо !

Как убрать фокус, используя jQuery?

Сентябрь 22, 2016 г.

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

Читать

Связанные списки select с получением данных по ajax

Декабрь 15, 2016 г.

В прошлый раз я показывал как можно "на лету" создавать списки html select, данные которых содержались в специальном javascript массиве. Подготовить ...

Читать

 

Комментарии к «Анимация ожидания загрузки/обновления, используя CSS3»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Один комментарий в “Анимация ожидания загрузки/обновления, используя CSS3”

  1. Виталий Янчук:

    очень годная статейка! я еще на просторах интернета нашел блог https://shneider-host.ru/blog/animaciya-zagruzki-stranicy-v-drupal-7.html, тут тоже довольно неплохо объясняют только другим способом, хоть в коде рыться так не надо))