Существует неизбежная задержка всякий раз, когда ваше веб-приложение взаимодействует с сервером. Это может быть для запроса Ajax, загрузки файла или использования более новых API-интерфейсов HTML5, таких как веб-сокеты или отправленные сервером события.
В идеале, вы должны дать пользователю некоторую обратную связь, чтобы указать, что его действие обрабатывается. Вы часто будете видеть маленькие анимированные GIF-изображения с вращающимися узорами. Есть несколько сайтов, которые будут создавать их для вас, такие как preloaders.net и ajaxload.info .
Изображения — лучший кросс-браузерный вариант, но у них есть ряд проблем:
- GIF-файлы не поддерживают альфа-прозрачность. Вы должны быть осторожны при размещении изображения на цветном фоне.
- Растровые изображения не будут хорошо масштабироваться. Если вы измените размеры, вам нужно создать новое изображение.
- Если вы не будете осторожны, анимированная графика может иметь большой размер файла.
- Изображения подвергаются дополнительному HTTP-запросу. Хотя изображение будет кэшировано, первоначальная загрузка может занять больше времени, чем фоновый процесс, который он представляет! Вы можете обойти эту проблему, предварительно загрузив изображение или используя встроенные URL-адреса данных, но это требует больше усилий.
К счастью, CSS3 позволяет создавать иконки загрузки без изображений. Их легко создавать, масштабировать, перекрашивать, использовать на любом фоне и не загружать изображения. Вы требуете:
- Один элемент HTML, например,
<div id="ajaxloader"></div>. - Несколько CSS-фонов, границ и эффектов затенения для создания графического значка.
- CSS3 преобразования и анимации для поворота или перемещения элемента.
Посмотреть демонстрационную страницу …
Совместимость браузера
CSS3 преобразования и анимации — это экспериментальные свойства, для которых требуются префиксы вендоров — и вы знаете, какие проблемы они вызывают . Пример кода реализует конечное свойство, а также префиксы для -webkit (Chrome и Safari), -moz (Firefox), -ms (IE) и -o (Opera), но нет гарантии, что они будут работать согласованно, если при все.
На момент написания этой статьи последние версии Chrome, Safari и Firefox предлагают анимацию CSS3. IE9 / 8/7/6 и Opera показывают статическое изображение, хотя IE10 и Opera 12 могут поддерживать свойства.
Чтобы еще больше усложнить ситуацию, Firefox позволяет вам анимировать псевдоэлементы отдельно. Поэтому вы можете добавить пару элементов, используя: before и: after и вращать или перемещать их в разных направлениях, чтобы создавать более сложные анимации. Хотя я изначально надеялся сделать это, он не работает в браузерах webkit. Chrome и Safari позволяют анимировать только реальные элементы. Кажется, это ошибка или недосмотр, но она не была исправлена в текущих или бета-версиях.
Создание иконы
Наш HTML- div можно разместить в любом месте документа, хотя лучше всего добавить его как последний дочерний элемент body . Затем он появится над другими элементами и может быть расположен относительно страницы.
Значок CSS просто устанавливает широкую белую закругленную границу. Затем цвет правой границы становится прозрачным и применяется небольшая заливка:
#ajaxloader { position: absolute; width: 30px; height: 30px; border: 8px solid #fff; border-right-color: transparent; border-radius: 50%; box-shadow: 0 0 25px 2px #eee; }
Результат:
Можно легко настроить свойства для различных эффектов, например, добавив border-right: 0 none; производит:
Анимация иконы
Чтобы заставить значок вращаться и пульсировать, мы применяем преобразования вращения и изменения непрозрачности в анимации CSS3. Имя анимации, продолжительность, тип замедления и повтор применяются к элементу:
#ajaxloader { animation: spin 1s linear infinite; }
затем ключевые кадры анимации:
@keyframes spin { from { transform: rotate(0deg); opacity: 0.2; } 50% { transform: rotate(180deg); opacity: 1.0; } to { transform: rotate(360deg); opacity: 0.2; } }
Ни один из браузеров не поддерживает анимацию без префиксов поставщиков, поэтому вы увидите альтернативы -webkit, -moz, -ms и -o в исходном коде при просмотре демонстрационной страницы .
Теперь значок может отображаться с помощью небольшого JavaScript-кода при каждом запуске Ajax-запроса. Это отличный эффект, который можно легко настроить и работает на 55% современных браузеров .
К сожалению, 45% веб-пользователей не увидят анимацию. Это число упадет, когда выйдет IE10, и пользователи переключатся на последние версии других браузеров, но он остается большим процентом. Вы можете вернуться к изображению, но, если вы делаете это, вы также можете использовать изображение для всех браузеров.
Поэтому я предлагаю вам взглянуть на собственную статистику. Если ваши посетители преимущественно используют Chrome, Safari и Firefox, вы можете использовать эту технику сегодня. Если нет, придерживайтесь изображений на данный момент и подождите немного дольше для более последовательной поддержки браузера.