Содержание
Что такое троббер?
Троббер (от англ. throbber — пульсация, биение) представляет собой анимированный графический элемент, который служит индикатором выполнения фоновых действий, таких как загрузка контента, выполнение задач или реализация команд. Этот элемент может использоваться на веб-сайтах, в приложениях или компьютерных программах. Классический пример троббера — вращающийся круг, который отображается в браузере на месте фавикона, пока загружается новая веб-страница. Такие индикаторы почти всегда присутствуют на вкладках браузеров.
Характеристика троббера
Троббер, также известный как асинхронный индикатор выполнения, является разновидностью прелоадера. В отличие от индикатора процесса (прогресс-бара), который показывает процент выполнения или оставшееся время, троббер лишь демонстрирует, что процесс загрузки продолжается. Он часто имеет пульсирующие очертания, создавая визуальный эффект, указывающий на незавершенность процесса. Поэтому троббер иногда называют пульсатором.
Зачем нужен троббер?
Первое использование троббера произошло в начале 1990-х годов в веб-браузере NCSA Mosaic, который лег в основу Internet Explorer. Разработчики внедрили пульсирующий индикатор активности, чтобы сообщить пользователям, что браузер работает и страницы загружаются. Основная задача троббера заключается в том, чтобы показать пользователю, что программа не зависла, а продолжает выполнять действия.
Дополнительные функции
Кроме информирования о процессе загрузки, троббер улучшает впечатление пользователя о сайте или программе. Во время загрузки контента, таких как стили, шрифты и изображения, элементы могут подгружаться неравномерно. Троббер скрывает эти неприглядные моменты, чтобы пользователь не увидел пустые или некорректно отображающиеся элементы. Также троббер может:
- Удерживать пользователей, привлекая внимание к креативной анимации.
- Отвлекать от ожидания, создавая иллюзию быстрого прогресса.
- Повышать узнаваемость бренда с помощью логотипов или уникальных надписей.
Где используют троббер?
Троббер появляется в тех случаях, когда загрузка сайта занимает больше времени, чем ожидалось, или когда нет ответа от сервера. Вы можете увидеть значок загрузки в следующих местах:
- На вкладке сайта в браузере.
- В поисковой строке браузера.
- На экране во время загрузки страницы.
- На медленно загружающихся элементах, таких как изображения или видео.
- В мобильных приложениях и программах.
Троббер может полностью скрывать ресурс или позволять взаимодействовать с ним, например, отменить загрузку или вернуться на главную страницу. Если ресурс полностью скрыт, пользователю остается лишь ждать окончания загрузки.
Варианты представления троббера
При первом использовании в веб-браузерах тробберы имели форму анимированного логотипа программы, и это остается популярным методом до сих пор. В дальнейшем появился и стал распространенным вращающийся кольцеобразный значок, известный как спиннер. Он может быть визуализирован в различных стилях, в зависимости от фирменного стиля компании и дизайна сайта.
К основным требованиям к анимации загрузки относится её динамичность. Наиболее частые варианты прелоадеров включают:
- Мерцающие точки в форме круга.
- Меняющиеся символы в консольных программах.
- Анимированные GIF или CSS-анимации.
Как добавить троббер на сайт без знания кода
Чтобы внедрить анимацию загрузки на сайт, вам не обязательно быть программистом. Существует несколько простых способов:
Специальные сервисы
Используйте онлайн-сервисы, которые позволяют создать или скачать анимацию загрузки и сгенерировать код для вставки. Примеры таких сервисов:
- Конструктор прелоадеров от Hello-site.ru.
- Codepen.
- Loading.io.
- Svgator.
- CSS Loader Generator.
После создания анимации просто скопируйте полученный HTML или CSS код.
Плагины для WordPress
Для сайтов на WordPress доступны специальные плагины, такие как LoftLoader, WP Smart Preloader или «Прелоадер». После установки и активации плагина вам достаточно выбрать желаемый дизайн и настроить элемент.
Встроенные функции конструкторов сайтов
В некоторых конструкторах сайтов есть встроенные функции для добавления троббера или анимации загрузки. Например, в Tilda можно использовать элемент «микроанимация», добавив блок «Т228» на верх страницы.