что такое прогресс бар
Отслеживаем прогресс выполнения в Python
Индикаторы прогресса (progress bar) — визуальное отображение процесса работы. Они избавляют нас от необходимости беспокоиться о том, не завис ли скрипт, дают интуитивное представление о скорости его выполнения и подсказывают, сколько времени осталось до завершения.
Человек ранее не использовавший индикаторы прогресса может предположить, что их внедрение может сильно усложнить код. К счастью, это не так. Небольшие примеры ниже покажут, как быстро и просто начать отслеживать прогресс в консоли или в интерфейсе быстро набирающей популярность графической библиотеки PySimpleGUI.
Используем Progress
Первым у нас идёт модуль Progress.
Всё, что от вас потребуется, это указать количество ожидаемых итераций, тип индикатора и вызывать функцию при каждой итерации:
Есть индикаторы на любой вкус:
Используем tqdm
Следующей на очереди идёт библиотека tqdm.
Быстрый и расширяемый индикатор прогресса для Python и CLI
Всего один вызов функции понадобится для получения результата аналогичного предыдущему:
Само собой, в комплекте идёт куча настроек и опций.
Используем alive-progress
Ещё один вариант синтаксиса, побольше дефолтных анимаций, чем в предыдущих примерах:
GUI индикатор прогресса для скрипта
Иногда возникает необходимость предоставить конечному пользователю графический индикатор.
Сколько кода нужно, чтобы достигнуть такого результата? Немного:
Индикатор в приложении PySimpleGUI
Рассмотрим реализацию индикатора в PySimpleGUI.
Вот как это сделать:
Заключение
Как видите, нет ничего сложного в добавлении информации о прогрессе выполнения: кода немного, а отзывчивость повышается очень сильно. Используйте индикаторы, чтобы больше никогда не гадать, завис ли процесс или нет!
Прогресс-бар
Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.
В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:
Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.
Если это уместно, дайте возможность отменить задачу и сделайте прогресс-бар не модальным, чтобы он не блокировал работу в сервисе.
Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.
Создание прогресс-бара требует больше усилий, чем подключение спиннера, и оправдано, если сценарий частотный.
Если получить данные о ходе выполнения задачи невозможно, лучше использовать спиннер. Имитировать работу прогресс-бара можно, только если он носит дополнительный и иллюстративный характер. Например, глобальный лоадер сопровождает загрузку контента, его задача ― заполнить паузу до появления первых элементов страницы, а не дать точную обратную связь.
Принцип работы
Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 30 секунд, третья — 15 секунд. Значит, должны получиться такие отрезки:
Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.
Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.
Если среднее время выполнения задач неизвестно, то прогресс-бар следует разделить на отрезки равной длины, а за среднее время взять минимально ожидаемое время.
Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.
Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.
Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.
Подпись
Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.
Укажите, сколько времени осталось до конца задачи. Округляйте в большую сторону: если процесс завершится раньше, пользователю будет приятно. Обратная ситуация вызовет негативные эмоции и снизит доверие к интерфейсу.
Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.
10 бесплатных макетов прогресс-баров
Индикатор загрузки данных или, как его еще часто называют, прогресс-бар – это один из важнейших элементов веб-дизайна. Наличие на сайте прогресс-бара может быть очень полезным, особенно, когда какой-либо процесс, например скачивание файла, происходит медленно. Для прогресс-бара очень важно, чтобы он был не только информативным, но еще и красивым. Этому элементу требуется очень качественная отрисовка – прогресс-бар должен быть оригинальным и эффектным. Если пользователю, зашедшему на сайт, приходится ждать, то нужно сделать так, чтобы его ожидание было не скучным. Если индикатор загрузки сделан на высоком уровне и наглядно отражает состояние прогресса выполнения задачи, то у пользователя останется положительное впечатление о сайте, а это именно то, что нужно, особенно если скрипты работают достаточно медленно. FreelanceToday представляет вашему вниманию 10 бесплатных макетов прогресс-баров с необычным дизайном.
Все макеты представляют собой многослойные PSD-файлы, так что их можно редактировать, изменяя внешний вид прогресс-бара таким образом, чтобы он соответствовал основному дизайну сайта.
Круглый прогресс-бар с полосой загрузки, изменяющей цвет в зависимости от хода выполнения задачи. Очень интересное решение – пользователь может «залипнуть», глядя, как полоса постепенно меняет свой цвет.
Даже простенькую горизонтальную полосу загрузки можно сделать очень привлекательной, добавив эффект свечения.
Очень интересный подход к дизайну прогресс-бара. Здесь мы видим не одну, а сразу четыре полосы загрузки. Посетителю сайта однозначно будет не скучно наблюдать за процессом загрузки.
Горизонтальный прогресс-бар с переключателем. Во время загрузки или скачивания файлов пользователь видит, сколько осталось времени до окончания процесса и может убедиться, что он работает с тем файлом, который ему нужен – информация представлена в верхней части полосы загрузки.
Очень простой прогресс-бар от дизайнера Айзека Санчеса. При наведении на полосу прокрутки, по-видимому, должна появляться подсказка с цифрами в процентах.
Прогресс-бар для мобильных приложений с темным пользовательским интерфейсом. Полоса загрузки меняет свой оттенок на более светлый в процессе выполнения задачи.
Еще один круговой прогресс-бар в этой подборке. Макет можно использовать не только как индикатор загрузки, но и как график, например при создании интерактивных диаграмм.
Самая обычная полоса загрузки с отсечками в процентах. Ничего особенного, зато бесплатно.
Сразу несколько вариантов для создания прогресс-бара. В макете представлено три круговых индикатора и два варианта горизонтальной полосы.
Необычное решение – в этом макете нет привычной индикации. Круглый индикатор постепенно заполняется как бы водой или другой жидкостью. В данном варианте жидкость имеет другой цвет, но ничто не мешает заменить ее цвет на любой другой. Интересно, как будет смотреться данный прогресс-бар, если его правильно анимировать.
Кастомизация HTML5 progress element
Прогрессбар — элемент вроде и редко встречающийся на сайтах (в отличии от селектов, чекбоксов, инпутов и прочего), но все равно без него не обойдется ни один ui-kit.
На данный момент HTML5 предоставляет нам нативный элемент progress, базовый функционал которого поддерживается практически всеми современными браузерами (caniuse.com/#feat=progress).
Но на базовых возможностях стилизации представляемых скажем IE11, мягко говоря далеко не уедешь. Все же хочется чтобы прогрессбары были с анимацией, градиентом, плавной сменой ползунка прогресса, и самое главное с выводом значения в процентах.
В этой статье я попытаюсь показать способ кастомизации прогрессбара, исходя из двух условий:
Сразу скажу что при верстке я всегда стараюсь использовать средства CSS по максимуму, на столько на сколько это возможно не прибегая к помощи JS. Так что такой способ может показаться кому-то излишним. Так же в примере будет использован препроцессор, так как без него очень долго писать нужные стили. Я предпочитаю LESS, но при написании статьи я так и не нашел ни одной вменяемой песочницы с поддержкой LESS. Так что в примере будет SCSS.
Итак, начнем с базовой HTML разметки:
И самый главный момент, — это проставление width для прогресса, и числового значения в процентах. Тут все просто, логика будет следующая:
Как не сложно догадаться, таких правил нам нужно ровно 100, для этого нам и нужны препроцессоры:
Безусловно здесь есть большой минус — много CSS на выходе. Но по мне плюсы этого метода перекрывают огромный CSS код.
История одного прогресс-бара
Наверное, любому программисту, который разрабатывает пользовательский интерфейс на C#/XAML, приходилось писать нестандартные элементы управления. В нашей веселой команде 2GIS для Windows Phone мы довольно часто делаем это, и такие задачи стали почти рутиной. Но об одном случае мне хочется рассказать подробнее. Все началось с того, что однажды нам понадобилось написать весьма своеобразный прогресс-бар.
Проблема
Как-то раз к нам на внутрикомандную рассылку пришло письмо от нашего коллеги Woodroof. Данил достаточно известен внутри компании: он является талантливым разработчиком, носит странную прическу и прокачал придирчивость внимание к деталям до максимума. Содержание его письма вкратце можно передать примерно так.
Такой прогресс-бар уже достаточно необычен, но сделать его можно довольно просто с помощью обычного сдвига маски. Вот разметка на XAML, которая передает основную идею реализации.
Я намеренно не привожу значения свойств Data у элемента Path, чтобы не загромождать код. Но суть в том, что есть два абсолютно одинаковых векторных пути, расположенных один под другим. При этом часть верхней картинки отсекается маской (элемент Path.Clip). Программно изменяя Rect у маски, мы тем самым регулируем «прогресс» загрузки. В дизайнере VS для этой разметки вы увидите примерно такую картинку.
Но анимация сдвига маски для таких сложных кривых, как вы могли заметить, выглядит не очень уместно. Данил писал нам: «Моя жена смотрела на этот лоадер, ждала, когда он доберётся до дерева, и была очень разочарована текущим поведением».
Мы всей командой тогда согласились, что гораздо лучше сделать вот так.
Но как же это сделать?
Решение
Мы немного подумали. На первый взгляд, стандартными средствами такого поведения не добиться. Но в нашей команде достаточно опытных разработчиков, настоящих профессионалов своего дела, поэтому через какое-то время мы все же нагуглили решение. Точнее, не готовое решение, конечно, а идею, которую можно взять за основу. Суть вот в чем.
Для начала добавим к нашему векторному пути штриховку.
За штриховку отвечает свойство StrokeDashArray. Оно принимает значения типа DoubleCollection, и в нашем случае первое число — это длина штриха, а второе — длина промежутка между штрихами.
Если очень сильно увеличить длину промежутка между штрихами, например, так StrokeDashArray=»9 99999″, то получим вот такую картинку.
Давайте для ясности я дам нашему нестандартному прогресс-бару имя — ProgressPathControl и определю его основную характеристику — свойство Progress.
Пусть Progress меняется от 0 до 1. Очевидно, что для Progress = 0 длина штриха тоже будет равна нулю, а для Progress = 1 длина штриха будет равна длине кривой. Этому числу должен равняться и промежуток между штрихами.
Длину кривой можно элементарно посчитать, приглядевшись к элементу Path. У него есть свойство Data типа Geometry, а в нашем случае это PathGeometry, у которого есть коллекция Figures. Каждый её элемент имеет коллекцию Segments, содержащую элементы различных типов, в том числе BezierSegment и LineSegment. Нужно пробежаться по всем этим штукам и просуммировать длины сегментов. Я ленивый, поэтому ограничусь только BezierSegment и LineSegment, так как в моем случае их достаточно, а длину кривой Безье посчитаю уж совсем простым способом.
Теперь, когда мы знаем длину кривой, мы можем определить значение свойства StrokeDashArray для любых значений Progress.
Внимательный читатель заметит, что длина штриха, а также длина промежутка между штрихами задаются не в условных единицах, как это принято в XAML, а в ширинах штриха.
Теперь у нас есть всё необходимое для написания нашего нестандартного прогресс-бара. Для полноты картины весь код ProgressPathControl, изрядно упрощенный, но неплохо иллюстрирующий основные принципы, я привожу ниже.
Profit
Подведем итоги. У нас стояла задача сделать необычный прогресс-бар. Для достижения необходимого эффекта мы использовали штриховку векторной кривой и анимацию длины штриха. Если такое решение кажется вам странным, знайте, что в своих чувствах вы не одиноки. Мне тоже так кажется. Но в то же время оно подкупает своей простотой и лаконичностью.
При желании код ProgressPathControl можно доработать, чтобы он научился анимировать произвольные кривые. Например, можно сделать так.