Что такое Progress bar? Значение термина Progress bar
Progress bar (Индикатор процесса) – это элемент графического интерфейса пользователя, представляющий собой прямоугольную (в большинстве случаев) панель для отображения индексации ходи или выполнения какой либо задачи, например загрузки файла по сети. Обычно бегунок индикатора процесса заполняется слева направо. Часто встречается текстовое сопровождение выполненных процентов. Такие элементы используются в том случае, если масштаб задачи известен, либо ход выполнения задачи требует отображения информации.
Помогло? Делись!
Реклама:
Представляем
систему управления сайтами
NetCat
CMS NetCat — профессиональная коммерческая система управления Интернет-сайтами, один из лидеров на российском рынке веб-разработок.
Наша компания является сертифицированным партнером и рекомендуемым разработчиком сайтов на NetCat во Владивостоке.
В настоящее время большинство новых сайтов мы создаем на основе ее программной платформы.
Быстрый поиск по сайту:
© Аниматика 2005 — 2023
690002 , г.Владивосток , пр-т Острякова, 5, оф.306
Тел.: +7 (423) 206-00-23
E-mail: info@animatika.ru
Прогресс-бар
Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.
В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:
Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.
Если это уместно, дайте возможность отменить задачу и сделайте прогресс-бар не модальным, чтобы он не блокировал работу в сервисе.
Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.
Создание прогресс-бара требует больше усилий, чем подключение спиннера, и оправдано, если сценарий частотный.
Если получить данные о ходе выполнения задачи невозможно, лучше использовать спиннер. Имитировать работу прогресс-бара можно, только если он носит дополнительный и иллюстративный характер. Например, глобальный лоадер сопровождает загрузку контента, его задача ― заполнить паузу до появления первых элементов страницы, а не дать точную обратную связь.
Принцип работы
Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 10 секунд, третья — 5 секунд. Значит, должны получиться такие отрезки:
0 % → 40 % → 80 % → 100 %
Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.
Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.
Если среднее время выполнения задач неизвестно, то прогресс-бар следует разделить на отрезки равной длины, а за среднее время взять минимально ожидаемое время.
Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.
Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.
Цвет
Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.
Подпись
Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.
Укажите, сколько времени осталось до конца задачи. Округляйте в большую сторону: если процесс завершится раньше, пользователю будет приятно. Обратная ситуация вызовет негативные эмоции и снизит доверие к интерфейсу.
Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.
Прогрессбар
Документация и примеры использования пользовательских индикаторов выполнения Bootstrap с поддержкой штабелированных баров, анимированных фонов и текстовых меток.
Как это устроено
- Мы используем класс .progress как обертку для индикации максимального значения прогрессбара.
- Мы используем внутренний класс .progress-bar для индикации пройденного прогресса.
- Класс .progress-bar требует оформления себя как строчного элемента, обычного класса или CSS для задания своей ширины.
- Класс .progress-bar также требует атрибутся role и aria , чтобы стать открытыми к взаимодействию с вспомогательными технологиями.
Все это воплощено в примерах ниже.
class="progress"> class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">