Разное

Progressbar: ProgressBar Класс (System.Windows.Forms) | Microsoft Learn

15.05.2023

Прогресс-бар — Компоненты — Контур.Гайды

Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.

В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:

Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.

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

Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.

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

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

Принцип работы

Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 10 секунд, третья — 5 секунд. Значит, должны получиться такие отрезки:

0 % → 40 % → 80 % → 100 %

Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.

Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.

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

Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.

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

Цвет

Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.

Подпись

Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.

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

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

что и когда использовать — Офтоп на DTF

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

8428 просмотров

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

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

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

Oleg Frolov

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

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

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

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

В общем-то, так и есть.

Gal Shir

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

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

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

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

В итоге

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

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

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

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

Индикатор прогресса — Typer

Если вы выполняете операцию, которая может занять некоторое время, вы можете сообщить об этом пользователю. 🤓

Индикатор выполнения

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

 время импорта
тип импорта
из трека импорта rich. progress
деф основной():
    всего = 0
    для значения в дорожке (диапазон (100), описание = "Обработка..."):
        # Поддельное время обработки
        время сна (0,01)
        всего += 1
    print(f"Обработано {всего} вещей.")
если __name__ == "__main__":
    typer.run(основной)

Вы помещаете то, что хотите повторить, внутрь track() Рича, а затем повторяете это.

Проверьте это:

 $ Python main.py
---> 100%
Обработано 100 вещей.

…на самом деле будет намного красивее. ✨ Но я не могу показать вам анимацию здесь, в документах. 😅

Цвета и информация будут выглядеть примерно так:

 $ Python main.py
Обработка... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╸━━━━━━━━━━  74% 0:00:01< /шрифт>

Спиннер

Если вы не знаете, сколько времени займет операция, вы можете вместо этого использовать спиннер.

Rich позволяет отображать многие вещи сложными и продвинутыми способами.

Например, это покажет два счетчика:

 время импорта
тип импорта
из rich.progress импортировать Progress, SpinnerColumn, TextColumn
деф основной():
    с прогрессом(
        СпиннерКолонка(),
        TextColumn("[прогресс.описание]{задача.описание}"),
        переходный = Истина,
    ) по мере продвижения:
        progress.add_task(description="Обработка...", всего=Нет)
        progress.add_task(description="Подготовка...", всего=Нет)
        время сна(5)
    Печать("Готово!")
если __name__ == "__main__":
    typer.run(основной)

Я не могу показать вам красивую анимацию здесь, в документах. 😅

Но в какой-то момент времени он будет выглядеть так (представьте, что он крутится). 🤓

 $ Python main.py
⠹ Обработка...
⠹ Подготовка...

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

Печататель

Индикатор выполнения

Если вы можете, вы должны использовать Rich , как описано выше, у него больше функций, он более продвинутый и может отображать информацию более красиво.

✨

Совет

Если вы можете использовать Rich, используйте приведенную выше информацию, документы Rich и пропустите оставшуюся часть этой страницы. 😎

Но если вы не можете использовать Rich, Typer (на самом деле Click) поставляется с простой утилитой для отображения индикаторов выполнения.

Использовать

typer.progressbar

Tip

Помните, что для этого лучше использовать Rich. 😎

Вы можете использовать typer.progressbar() с оператором with , например:

 с typer.progressbar(что-то) в качестве прогресса:
    проходить

И вы передаете в качестве аргумента функции

typer.progressbar() то, что вы обычно перебираете.

 время импорта
тип импорта
деф основной():
    всего = 0
    с typer.progressbar(range(100)) в качестве прогресса:
        для значения в процессе:
            # Поддельное время обработки
            время сна (0,01)
            всего += 1
    print(f"Обработано {всего} вещей. ")
если __name__ == "__main__":
    typer.run(основной)

Итак, если у вас есть список пользователей, это может быть:

 пользователей = ["Камила", "Рик", "Морти"]
с typer.progressbar(users) в качестве прогресса:
    проходить

И оператор with с использованием typer.progressbar() дает вам объект, который вы можете перебирать, как если бы это было то же самое, что вы бы перебирали обычно.

Но при повторении этого объекта Typer (фактически Click) будет знать, что нужно обновить индикатор выполнения:

 пользователей = ["Камила", "Рик", "Морти"]
с typer.progressbar(users) в качестве прогресса:
    для пользователя в процессе:
        typer.echo(пользователь)

Совет

Обратите внимание, что существует 2 уровня кодовых блоков. Один для оператора с оператором и один для оператора для оператора .

Проверьте это:

 $ Python main.py
---> 100%
Обработано 100 вещей.

Установка длины индикатора выполнения

Tip

Помните, что для этого лучше использовать Rich. 😎

Индикатор выполнения создается на основе длины итерируемого объекта (например, списка пользователей).

Но если длина недоступна (например, с чем-то, что каждый раз выбирает нового пользователя из веб-API), вы можете передать явную длину в typer.progressbar() .

 время импорта
тип импорта
определение iterate_user_ids():
    # Давайте представим, что это веб-API, а не range()
    для i в диапазоне (100):
        выход я
деф основной():
    всего = 0
    с typer.progressbar(iterate_user_ids(), length=100) в качестве прогресса:
        для значения в процессе:
            # Поддельное время обработки
            время сна (0,01)
            всего += 1
    print(f"Обработано {всего} идентификаторов пользователей.")
если __name__ == "__main__":
    typer.run(основной)

Проверьте это:

 $ Python main. py
---> 100%
Обработано 100 идентификаторов пользователей.
О функции с
yield

Если вы не видели что-то вроде того, что дает выше, то это «генератор».

Вы можете перебрать эту функцию с помощью

вместо , и на каждой итерации она даст вам значение yield .

yield похож на return , который дает значения несколько раз и позволяет вам использовать функцию в для цикла .

Например:

 по определению iterate_user_ids():
    # Давайте представим, что это веб-API, а не range()
    для i в диапазоне (100):
        выход я
для i в iterate_user_ids():
    печать (я)

напечатает каждый из «идентификаторов пользователя» (здесь это просто числа от 0 до 99 ).

Добавить этикетку

Tip

Помните, что для этого лучше использовать Rich. 😎

Вы также можете установить 9Этикетка 0011 :

 время импорта
тип импорта
деф основной():
    всего = 0
    с typer. progressbar(range(100), label="Processing") в качестве прогресса:
        для значения в процессе:
            # Поддельное время обработки
            время сна (0,01)
            всего += 1
    print(f"Обработано {всего} вещей.")
если __name__ == "__main__":
    typer.run(основной)

Проверьте это:

Python main.py Обработано 100 вещей.

Повторить вручную

Если вам нужно вручную перебрать что-то и обновить индикатор выполнения нерегулярно, вы можете сделать это, не передавая итерируемый объект, а просто длина от до typer.progressbar() .

А затем вызов метода .update() в объекте из с оператором :

 время импорта
тип импорта
деф основной():
    всего = 1000
    с typer.progressbar(length=total) в качестве прогресса:
        для партии в диапазоне (4):
            # Поддельное время обработки
            время сна(1)
            прогресс.обновление(250)
    print(f"Обработано {всего} вещей партиями. ")
если __name__ == "__main__":
    typer.run(основной)

Проверьте это:

Python main.py Обработано 100 вещей партиями.

Индикатор выполнения Bootstrap — примеры и руководство

Индикатор выполнения

Отзывчивый индикатор выполнения, созданный с помощью последней версии Bootstrap 5. Индикатор выполнения — это индикатор, показывающий ход выполнения, т. е. задачу или время. Используйте его с процентами, шагами и другими параметрами.

Документация и примеры использования настраиваемых индикаторов выполнения с поддержкой сложенных баров, анимированные фоны и текстовые метки.

Базовый пример

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

Показать код Изменить в песочнице

            
            <дел>

Как это работает

Компоненты прогресса состоят из двух элементов HTML, некоторого количества CSS для установки ширины и нескольких атрибуты. мы не используем элемент HTML5 , что позволяет складывать индикаторы выполнения, анимировать их и размещать над ними текстовые метки.

  • Мы используем .progress в качестве оболочки, чтобы указать максимальное значение прогресса. бар.
  • Используем внутренний .progress-bar для индикации текущего прогресса.
  • .progress-bar требует встроенного стиля, служебного класса или пользовательского CSS для установки их ширина.
  • .progress-bar также требует некоторой роли и атрибутов aria , чтобы сделать его доступным.

Сложите все вместе, и вы получите следующие примеры.





Показать код Изменить в песочнице

            
            <дел>