Крутящийся значок загрузки как называется

Прогресс Бар или Спиннер: что и когда использовать

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

И не забывайте подписываться на мой блог, чтобы у меня была хоть какая-то мотивация ��

Спиннеры лучше использовать, когда время загрузки небольшое

Вам ведь не нравится стоять в очереди на одном месте, не продвигаясь вперёд? Так и юзерам не нравится смотреть на спиннеры больше четырёх секунд.

Согласно исследованию, именно столько юзеры готовы терпеть спиннер. Если они вынуждены наблюдать спиннер дольше, то начнут думать, всё ли в порядке с вашим приложением или с их интернет-подключением.

При этом, если время ответа меньше одной секунды, то спиннер можно вообще не показывать.

Прогресс Бары делают длинную загрузку терпимее

Будет логичным предположить, что если время ожидания ответа составляет больше 4 секунд, то стоит использовать прогресс бар. В общем-то, так и есть.

Индикатор процесса (прогресс бар) задаёт чёткие ожидания времени загрузки. Юзеры своими глазами наблюдают прогресс загрузки, что снижает негативные эмоции от ожидания. Спиннер не даёт этого ощущения, он не показывает прогресс и не подталкивает юзера к ожиданию загрузки. Юзеры просто не знают, обрабатывает ли приложение их запрос или просто зависло.

Как показывать прогресс бар

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

При этом, если процесс занимает меньше минуты, то достаточно будет указать прогресс в процентах. Но если он занимает длительное время, то юзерам проценты не помогут оценить оставшееся время ожидания. В таком случае лучше использовать примерную оценку оставшегося времени. Эта информация поможем им понять, что процесс может занять длительное время.

В итоге

Казалось бы — всё просто. Загрузка меньше 4 секунд — используй спиннер. Больше — прогресс бар.

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

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

Если вам понравилось — подписывайтесь на мой блог и кидайте деньги в монитор. Жмите на колокольчик, чтобы ничего не пропустить. И выращивайте петрушку. Она полезная.

Троббер

В Unisender есть все для рассылок: можно создавать и отправлять клиентам письма и SMS, настроить чат-бота и делать рассылки в Telegram и даже собрать простой лендинг для пополнения базы контактов.

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

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

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

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

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

Зачем нужен

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

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

Троббер в Internet Explorer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мерцающие точки в форме круга — один из самых частых вариантов прелоадера

В консольных программах (программа с текстовым интерфейсом, которая работает с командной строкой) роль индикатора часто выполняет последовательность меняющихся символов.

Тробберы применяют и в командной строке. Источник

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

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

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

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

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

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

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

• Конструктор прелоадеров от Hello-site.ru ;
• Codepen ;
• Loading.io ;
• Svgator ;
• CSS Loader Generator .

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

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

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

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

Плагины

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

В настройках плагина LoftLoader можно изменить вид анимации загрузки

Встроенные функции конструктора сайтов

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

У Tilda есть такой элемент, как микроанимация . Использовать его просто — нужно на самый верх страницы добавить блок «Т228» из категории «Другое».

В Tilda можно настроить отображение загрузочной анимации

Круглые

Плоский (flat) анимированный секундомер с двигающейся стрелкой.

Детская цветрая вертушка вращается

Форма похожая на каплю двигается по кругу.

Вращающийся плоский символ Инь и Янь.

Вращающийся сегмент кольца.

Стрелка вращается.

Две сферы вращаются вокруг центральной.

Сферы вращаются вокруг общего центра.

Мяч вращается вокруг центра изображения.

Три полумесяца вращаются вокруг общего центра.

Вращающийся радужный круг.

Несколько колец появляющиеся одно за другим по очереди.

Три сегмента вращаются вокруг точки и кольца.

Кольцо с голубым свечением движущимся по нему.

Три мяча в кругу двигаются как в маятнике.

Половина кольца вращается.

Вращающееся вокруг своей оси солнце.

8 треугольников расположенных по кругу тают и появляются.

12 сегментов двойного кольца появляются и тают по очереди.

Кольцо разбитое на 12 сегментов заполняется и стирается.

Кольцо похожее на колесо вращается вокруг своей оси.

Полумесяц вращается по кругу.

Кол-во на страницу:

Спиннер или вращающийся прелодер — это изображение (как правило, анимированное), в котором объект или набор объектов вращается вокруг какой-либо оси, информируя пользователя о процессе загрузки содержимого. Иногда его называют круглой иконкой загрузкой или крутящаяся иконка. Обычно такие анимации вложены в квадратное прозрачное изображение. Такой тип иконки загрузки принят как самый оптимальный, т.к. не занимает много пространства визуального интерфейса, не требует большого количество кадров (делая анимацию легкой в байтах), и очень ясно дает понять, что на фоне происходит какое-то действие. Такой тип иконок широко распространен и уже стал стандартом, таким образом даже люди не IT-профессионалы понимают, что происходит какой-то процесс, окончания которого надо дождаться.

Категория «круглые» в основном состоит из спиннеров, но не ограничена ими. В ней могут быть иконки, которые формируют круг или кольцо в том или ином виде во время анимации (такие как Растущее кольцо). Некоторые прелодеры могут быть тематическими (например, Загрузка строения, которая вызывает ассоциации со строительством), в то время как другие созданы в общей форме «для любого пользования» (например, самые популярные гонящиеся стрелки).

Признаюсь: я писал поддельный экран загрузки

На выходных посмотрел видео Алексея Макаренкова с заголовком “Полоса загрузки — не то, чем кажется…”, где он рассказывает как разработчики игр мухлюют с полоской загрузки.

Вкратце: полоска загрузки в играх — фейк, могла двигаться как угодно, но движется рывками, человеческое восприятие считает именно такой сценарий загрузки самым правдоподобным, а в плавную загрузку игроки не верят. Лучше один раз увидеть, чем сто раз услышать, вот это видео: Полоса загрузки — не то, чем кажется. (осторожно, присутствует реклама красного банка).

Но если смотреть лень, то дальше Алексей говорит о том, что это и так было предсказуемо — секрет Полишинеля, но об этом никто, как правило, не говорит. Когда люди узнают правду, это их “слегка” удивляет. Более того, в статьях и лекциях девелоперов, даже в тех которые посвящены дизайну экранов загрузки, о фейках не пишут.

И тут я могу попытаться заполнить пробел, и рассказать про то, как создавал фейковый экран загрузки. Нет, я не разработчик игр, однако играми экраны загрузки не ограничиваются. Лично я писал такой муляж для приложения на Silverlight. Как давно, это было, помнит только мутной реки вода: все сроки давности уже прошли, про это приложение, да и про Silverlight, уже все позабыли, так что можно снять гриф секретности, сдуть пыль со старого кода и вспомнить как это было.

Олды тут? Вместо дисклеймера

В публикации будет некрокод, с учётом того, что Silverlight уже не поддерживается, буду исходить из предположения что никто разбираться в этом не желает, постараюсь давать пояснения, достаточные для формирования представления и понимания. Всё-таки статья не про Silverlight, а про то, “как разработчики обманывают с экранами загрузки”.

Проблема. Вместо введения

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

     html, body < height: 100%; overflow: auto; >body < padding: 0; margin: 0; >#silverlightControlHost     
 
  
 
  

Указывается xap-файл, и пока он грузится — идёт индикатор загрузки: вращающееся колесо и число показывающее процент загрузки в зависимости от размера скачиваемого xap-файла: скачалось 2 Мб из 8, покажет 25%. Это поведение по умолчанию — ничего дополнительно писать не надо.

Всё было хорошо пока в один прекрасный день, в который никто ничего не трогал, оно само, размер скачиваемого xap-файл ни стал оцениваться в 0 байт. Само собой файл не стал невесомым, просто, почему-то, при скачивании, кто-то, или что-то, зарезал заголовок с размером файла.

На экране загрузке гордо крутилось колесо с надписью 0%, висели эти 0% относительно долго, обычно загрузка занимала пару минут, и потом резко 100%.

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

Прошла неделя, периодически к этой задаче возвращались, но решение найдено не было.

Прошло ещё некоторое время. И тут начали возмущаться уже пользователи, мол висит индикатор загрузки, кэш чистили, куки чистили, компьютер перезагружали, браузер меняли, а он на нуле и ничего не грузит, и у всех такое дело. Что с приложением стало? Объясняли что так мол и так, — не надо суеты, ждите и всё будет. Пользователи набирались терпения, убедились что всё работает, но осадочек остался, и чтобы не разводить панику надо было индикатор загрузки чинить.

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

В этот то момент мы и встали на скользкую дорожку. Ну самое очевидное — пользователи ведь жалуются не на то, что размер файла не определяется, а на то, что полоска загрузки замерла, на файл то им плевать с высокой колокольни.

Искушение злом. Вместо оправдания

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

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

Реализация обмана. Вместо охоты на баг

К счастью в Silverlight задача кастомизации экрана загрузки — типичная, нацелена не на фейковые экраны, а на всякое украшательство, но так или иначе гуглится легко, а там уже кто какие цели преследует — кто украшательство, кто подделку полосы прогресса. Нужно добавить два параметра splashscreensource и onsourcedownloadprogresschanged :

Первый — это визуальное представление, xaml-файл ( LoadScene.xaml ):

Второй — это скрипт для обработки загрузки.

Изначально это была просто полоска. Не знаю как так получилось, но со временем полоска, предназначенная для того чтобы заполняться равномерно в течении двух минут, превратилась в две: одна чтобы показывать общий прогресс, вторая чтобы показывать загрузку «текущего» модуля:

Откуда мы знаем какой модуль загружается и сколько времени это займёт? Да ниоткуда — это тоже подделка. Обычный массив со списком строк, которые якобы названия модулей. Названия выводятся вместо слова «загрузка».

В итоге пользователь видит что нижняя полоса — прогресс модуля, загружается достаточно быстро, вероятно это и был ожидаемый эффект: система очень быстро грузит отдельные модули, а долго загружается потому что модулей много.

Ниже представлена XAML-разметка второго варианта:

Здесь у нас четыре квадрата: два для верхней полосы прогресса ( progressBarBackground , progressBar ), два для нижней.

По одному квадрату progressBarBackground и progressBarBackground2 — представляют пустую незаполненную полосу прогресса, и ещё по одному progressBar и progressBar2 меняют свою ширину по мере “загрузки” и тем самым иллюстрирует движение полосы прогресса.

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

Собственно для реализации анимации прогресса нужно сделать изменение ширины у progressBar и progressBar2 , ну и надписи периодически менять.

Для всего этого необходимо реализовать onSourceDownloadProgressChanged , возвращаемся к aspx файлу:

На что тут можно обратить внимание, во-первых: на diff — это фейковый список загружаемых модулей, а i — это индекс текущего загружаемого модуля.

И во-вторых: на функцию onSourceDownloadProgressChanged , при нормальном сценарии, — если размер файла приходит корректный, она вызывается с некоторой периодичностью и в её параметрах содержится какая доля файла уже загружена, соответственно мы можем использовать это для честной визуализации. Однако в нашем случае функция вызывается всего два раза: в самом начале, когда загружено 0, и в самом конце, когда загружено 100%.

var val = sender.findName("progressBar").Width / sender.findName("progressBarBackground").Width; if (eventArgs.progress > val) < sender.findName("LoadingText").Text = Math.round((eventArgs.progress * 100)) + "%"; sender.findName("progressBar").Width = eventArgs.progress * sender.findName("progressBarBackground").Width; if (eventArgs.progress >= 1 / 4 * (i + 1) || eventArgs.progress >= 0.98) < sender.findName("LoadingText2").Text = "100%"; sender.findName("progressBar2").Width = sender.findName("progressBarBackground2").Width; >>

Написан на всякий случай, чтобы не было накладок если ошибка с определением размера файла пропадёт так же внезапно, как и возникла.

В этом случае код должен попытаться правдоподобно скоординировать фейковый и реальный прогресс. По крайней мере чтобы это не сильно бросалось в глаза и наш обман не вскрылся.

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

Полоса загрузки модулей тоже начнёт двигаться рывками из-за условия в строках 7 — 10. Суть его в том, что если мы загрузили 25% от общего размера, то мы не должны показывать что грузится первый модуль, а писать уже про второй — с первым заканчивать. Если общий прогресс превысил 50%, то и второй модуль надо перестать грузить, показать что он загружен на 100% и переходить дальше и т.д. из расчёта 25% на модуль, — четыре модуля покажем и хватит.

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

На один листинг выше, в 22 строке есть условие

if (id === 0)

Сделано для тех же целей, — на случай если функция начнёт вызываться корректно. Если проверку условия не сделать — то запустится множество циклов в setInterval и полоска загрузки будет двигаться очень быстро, дойдёт до 100% и замрёт так на пару минут.

Думаю это отличает нашу поддельную полосу загрузки от большинства других подделок: мы предусмотрели корректировку относительно реального прогресса.

Теперь о самих интервалах. Их два.

id = setInterval(function() < var rel = sender.findName("progressBar").Width / sender.findName("progressBarBackground").Width; rel += (Math.random() * 2 + 2) / 100; if (rel >, 3500);

Раз в 3.5 секунды изменяет общую полосу прогресса на случайную величину от 2 до 4 процентов. Замирает на 96% и делает вид что осталось совсем чуть-чуть, но он замер на какой-то тяжёлой операции, после которой сразу 100% и приложение запущено. Обычно загрузка завершилась раньше чем он доходил до 96%.

setInterval(function () < var rel1 = sender.findName("progressBar").Width / sender.findName("progressBarBackground").Width; var rel2 = sender.findName("progressBar2").Width / sender.findName("progressBarBackground2").Width; rel2 += (Math.random() * 2 + 2) / 100; if (rel1 >= 0.96) < sender.findName("progressBar2").Width = sender.findName("progressBarBackground2").Width; sender.findName("LoadingText2").Text = "100%"; >else if (rel2 >= 1) < sender.findName("progressBar2").Width = 0; sender.findName("LoadingText2").Text = "0%"; i++; >else < sender.findName("LoadingText2").Text = Math.round((rel2 * 100)) + "%"; sender.findName("progressBar2").Width = rel2 * sender.findName("progressBarBackground2").Width; >sender.findName("MessageText").Text = diff[i]; >, 500);

Второй интервал управляет полосой загрузки модуля. Если основная полоса загрузки подвисла на 96%, то делаем вид что текущий модуль загружен на 100%, но к следующую модулю не переходим, даже если в списке ещё что-то есть. Так и остаётся.

В остальных ситуациях плавно доходим до 100%, увеличиваем i на единицу — доставая из массива “следующий модуль”, сбрасываем полосу прогресса загрузки модуля на 0, и всё сначала.

Загрузка “модуля” идёт в 7 раз быстрее “общей” загрузки, поэтому на всякий случай в массиве необходимо иметь 7 элементов, за границу массива не выйдет т.к. при достижении общего прогресса в 96% — мы перестаём инкрементировать переменную i . Хотя сейчас мне это не кажется надёжным, лучше было бы ещё сделать дополнительную проверку на значение i , ну да ладно.

Вот и вся реализация.

Заключение. Вместо покаяния

Таким образом мы дурим пользователя за его же деньги. И обмануть его не трудно! Он сам обманываться рад! И это не фигура речи, дословно не помню, но желание коллективного пользователя было сформулировано как-то так: “Сделайте хоть что-нибудь чтобы мы видели что приложение не зависло, и примерно представляли сколько ещё осталось ждать”.

С этой точки зрения мы достигли того чего хотел пользователь, приложение даже грузилось быстрее чем обещала полоса прогресса, как правило уже на 70-80% загрузка завершилась — приятный бонус за Ваше ожидание. Ну и никто больше не перезагружал страницу полагая что она зависла. Даже если бы она зависла на 96%, вряд ли бы кто-то нажал F5, ведь остался последний рывок и загрузка может завершиться в любой момент.

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

Если Вы читаете это как разработчик — знайте, подделать экран загрузки это нормально, а порой необходимо.