Что такое троббер и зачем он нужен

Троббер, или асинхронный индикатор выполнения, относится к разновидностям прелоадера. Прелоадер — анимированная или другая визуальная заглушка, которую показывают пользователю во время загрузки сайта. Например, при открытии в браузере новой страницы на месте стандартного размещения фавикона виден вращающийся круг. Он движется до момента полной загрузки веб-страницы. Этот круг и есть один из вариантов троббера.

Тробберы почти всегда присутствуют на вкладках браузеров

Элемент часто имеет пульсирующие очертания. Это визуальный эффект, который указывает на неоконченный процесс. Поэтому троббер иногда называют пульсатором. Тем не менее, в отличие от индикатора процесса (прогресс-бара), троббер не показывает процент или количество времени, оставшееся до конца загрузки.

Зачем нужен троббер

Впервые троббер использовали в начале 1990-х годов в веб-браузере NCSA Mosaic, который стал основой для Internet Explorer.

Разработчики придумали пульсирующий индикатор активности, который сообщал пользователю: «Все работает! Браузер не завис, а страницы загружаются». Позже идея была заимствована для других IT-продуктов.

Троббер в Internet Explorer

Для загрузки веб-страницы, приложения или программы требуется некоторое время. Если на экране в этот момент ничего не меняется, пользователь может решить, что ресурс не работает. Он закроет вкладку и уйдет. То есть основная задача троббера — показать пользователю, что программа не зависла и продолжает выполнять действия. Отсюда и другое название элемента — значок загрузки.

Ещё одна задача троббера — улучшить впечатления пользователя о сайте или программе. В процессе загрузки стили, шрифты, картинки и прочие элементы подгружаются неравномерно. Для того чтобы пользователь не видел неприглядную картинку, ее скрывают с помощью троббера.

Пример предзагрузки страницы сайта. Контент не виден до полной загрузки страницы

Также троббер применяют в следующих целях:

Удержать пользователей. Креативная анимация привлекает внимание и спасает от преждевременного закрытия ресурса.
Отвлечь от ожидания. При наблюдении за движением картинки людям кажется, что загрузка происходит быстрее.
Повысить узнаваемость бренда. В качестве загрузочной анимации можно использовать логотип, маскота, интересные надписи.

Это троббер в онлайн-сервисе по редактированию видеороликов Clideo. Пока программа сжимает видео, пользователь видит забавные надписи

Не стоит намеренно растягивать длительность анимации — троббер должен работать только в случае задержки загрузки. Это своего рода страховка, которая помогает уменьшить разочарование пользователей от ожидания.

Где используют троббер

Троббер появляется в случаях, когда долго загружается сайт, нет ответа от сервера, не прогружается какой-то отдельный элемент страницы, например, видео или картинка. Увидеть значок загрузки можно:

на вкладке сайта в браузере;
в поисковой строке браузера;
поверх страницы в процессе её загрузки;
поверх медленно загружающегося отдельного элемента;
в мобильных приложениях.

Троббер полностью скрывает ресурс или позволяет с ним взаимодействовать. Например, нажать на кнопку «стоп» и отменить действие либо кликнуть по значку и перейти на главную страницу.

А вот если ресурс полностью скрыт и недоступен, пользователю остается только ждать окончания загрузки.

В момент загрузки сайт полностью скрыт под картинкой с троббером

Варианты представления

При первоначальном использовании в веб-браузерах тробберы имели форму анимированного логотипа программы. Использование лого в качестве анимации загрузки популярно до сих пор.

Практически любой логотип можно превратить в троббер

Позднее появился вращающийся кольцеобразный значок — спиннер. Он популярен до сих пор и используется в разных вариациях.

Вращающееся кольцо — классический троббер

Вращающийся круг визуализируют по-разному в зависимости от фирменного стиля бренда и дизайна сайта.

Спиннеру можно придать любую форму. Источник

Основное требование к анимации загрузки — её динамичность в процессе выполнения действия.

Это самые распространенные варианты. Фактически в качестве предзагрузчика можно использовать любое изображение в формате анимированного GIF или анимации CSS (код для описания визуального представления).

Различные варианты тробберов предлагают на сайте для дизайнеров Dribbble

А это вариации дизайнов на Behance

Как добавить троббер на сайт без знания кода

Чтобы добавить анимацию загрузки на сайт, необязательно быть программистом. Можно использовать более простые способы.

Специальные сервисы

Используйте сервисы, которые позволяют создать или скачать анимацию загрузки и генерируют код для вставки.

Например:

После создания анимации в сервисе необходимо скопировать полученный HTML- или CSS-код.

Инструкция по добавлению прелоадера

Полученный HTML-код нужно добавить в код сайта сразу после открывающегося тега <body> перед закрывающимся тегом </body>. При использовании CSS-кода его можно вставить в HTML-код страницы в том месте, где вы хотите видеть анимацию загрузки.

Вставьте готовый код, и троббер будет работать на сайте

Плагины для CSM WordPress

Для сайтов на WordPress используют специальные плагины. Например, LoftLoader, WP Smart Preloader или «Прелоадер». После установки и активации плагина достаточно выбрать дизайн и настроить элемент.