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

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

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

Делаем эффект параллакса для заднего фона на сайте

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

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Zoom-эффект на CSS3

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

Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, ...

Читать

 

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

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



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

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

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

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