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

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

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

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать

 

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

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



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

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

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

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