Анимация ожидания загрузки/обновления, используя 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. :)

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

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

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

Подключаем fancybox в Drupal 6

Сентябрь 1, 2013 г.

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать

 

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

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



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

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

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

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