Прогресс бар это: Руководство по элементам управления ходом выполнения — UWP applications

div.progress {
overflow: hidden;
position: absolute;
top: 118px;
left: 1px;
width: 100px;
height: 5px;
border: 1px solid #B9A059;
background: #E3C0D1;
margin:0;
padding: 0;
}
div.progress_load {
height: 5px;
border: 1px solid #B9A059;
background: #995274;
margin:0;
padding: 0;
z-index: 999;
}

<div title="Заполнение 30%"><div></div></div>

<progress value="70" max="100">70 %</progress>

# Print iterations progress
def printProgressBar (iteration, total, prefix = '', suffix = '', decimals = 1, length = 100, fill = '█', printEnd = "\r"):
    """
    Call in a loop to create terminal progress bar
    @params:
        iteration   - Required  : current iteration (Int)
        total       - Required  : total iterations (Int)
        prefix      - Optional  : prefix string (Str)
        suffix      - Optional  : suffix string (Str)
        decimals    - Optional  : positive number of decimals in percent complete (Int)
        length      - Optional  : character length of bar (Int)
        fill        - Optional  : bar fill character (Str)
        printEnd    - Optional  : end character (e.g. "\r", "\r\n") (Str)
    """
    percent = ("{0:." + str(decimals) + "f}").format(100 * (iteration / float(total)))
    filledLength = int(length * iteration // total)
    bar = fill * filledLength + '-' * (length - filledLength)
    print('\r%s |%s| %s%% %s' % (prefix, bar, percent, suffix), end = printEnd)
    # Print New Line on Complete
    if iteration == total: 
        print()
 

Примечание: это для Python 3; см. комментарии для деталей об использовании этого в Python 2.

Образец использования

import time

# A List of Items
items = list(range(0, 57))
l = len(items)

# Initial call to print 0% progress
printProgressBar(0, l, prefix = 'Progress:', suffix = 'Complete', length = 50)
for i, item in enumerate(items):
    # Do stuff...
    time.sleep(0.1)
    # Update Progress Bar
    printProgressBar(i + 1, l, prefix = 'Progress:', suffix = 'Complete', length = 50)

Пример вывода:

Progress: |█████████████████████████████████████████████-----| 90.0% Complete 

Обновить

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

10 бесплатных макетов прогресс-баров / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

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

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

ROUND PROGRESS METER

Круглый прогресс-бар с полосой загрузки, изменяющей цвет в зависимости от хода выполнения задачи. Очень интересное решение – пользователь может «залипнуть», глядя, как полоса постепенно меняет свой цвет.

LUMINOUS PROGRESS BAR

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

LOADING BAR

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

PROGRESS BAR + RETINA READY

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

FUNKY LOADING BAR

Очень простой прогресс-бар от дизайнера Айзека Санчеса. При наведении на полосу прокрутки, по-видимому, должна появляться подсказка с цифрами в процентах.

DARK UI

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

LOADING BAR

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

BLUE LOADING BAR

Самая обычная полоса загрузки с отсечками в процентах. Ничего особенного, зато бесплатно.

PROGRESS BARS

Сразу несколько вариантов для создания прогресс-бара. В макете представлено три круговых индикатора и два варианта горизонтальной полосы.

CUSTOM DOWNLOAD BUTTON

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

Vue-progressbar — легковесный лоадер для приложений на VueJS

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

С чем имеем дело

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

Как начать пользоваться

Установка:

$ npm install vue-progressbar

В main.js указываем:

import VueProgressBar from 'vue-progressbar'

Vue.use(VueProgressBar, {
  color: 'rgb(143, 255, 199)',
  failedColor: 'red',
  height: '2px'
})

В App.vue копируем:

<template>
    <div>
        <!-- for example router view -->
        <router-view></router-view>
        <!-- set progressbar -->
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

К примеру, в дочерних компонентах делаем что-то асинхронное:

<script>
export default {
  methods:{
    start () {
        this.$Progress.start()
    },
    set (num) {
        this.$Progress.set(num)
    },
    increase (num) {
        this.$Progress.increase(num)
    },
    decrease (num) {
        this.$Progress.decrease(num)
    },
    finish () {
        this.$Progress.finish()
    },
    fail () {
        this.$Progress.fail()
    },
    test(){
      this.$Progress.start()

      this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz')
      .then((response) => {
          this.$Progress.finish()
      }, (response) => {
          this.$Progress.fail()
      })
    }
  }
}
</script>

Заключение

На страничке проекта Github можно найти подробное описание API плагина, а также его взаимодействие с api-axios.js.

В категории «прогресс баров» для VueJS, библиотека Vue-progressbar является оптимальной в плане конфигураций и быстродействия.

Кнопки с индикатором загрузки — правила использования в дизайне интерфейсов

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

В этом материале поговорим о том, как использовать кнопки с индикатором загрузки для улучшения user experience.

Какие проблемы они решают

Каждый элемент в UI играет определённую роль. Кнопки запускают выполнение определённых действий: загрузка контента, добавление в корзину, переход на сайт. Некоторые дизайнеры знают, что баттоны бывают неактивными и активными. Ещё у них есть состояние загрузки.

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

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

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

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

Индикатор прогресса — интерактивный диалог, который отображает состояние системы. Нажали кнопку отправки, появился progressbar и дополнительные объяснения не нужны. Хороший user interface в обязательном порядке предоставляет информацию о ходе выполнения операции. Бывают случаи, когда визуальные элементы спасают ситуацию. Они приходят на помощь, если действие выполняется слишком долго или система перегружена запросами.

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

Хороший дизайнер доводит проекты до момента появления продукта в общем доступе. Он первым тестирует приложение или веб-сайт, находит недочёты по юзабилити и сообщает клиенту. Это выводит сотрудничество на новый уровень. Если у заказчика в будущем появятся новые проекты, есть все шансы, что он обратится к специалисту, который проявил себя хорошо.

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

Загрузка может длиться 5-10 секунд или даже несколько минут. Главное, чтобы время было сопоставимо с пользой, которую получит человек. Если он заполняет форму и на отправку данных уходит 5 минут, мало кто будет ждать. Когда речь идёт о скачивании важного файла, который сложно найти, подождать можно. Особенно, если загрузка осуществляется в фоновом режиме.

Типы индикаторов

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

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

Петлевая анимация

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

Петлевая анимация подходит для прелоадера и отображения загрузки контента. Её можно использовать на информационных и коммерческих сайтах. В первом случае для бесконечного скролла при подгрузке дополнительных блоков. Во втором — как анимацию для появления новых «плиток» товаров.

Процентный индикатор

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

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

Прогресс-бар

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

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

Способы применения

Любой элемент UI надо использовать по назначению. Хороший интерфейс отличается логичностью, последовательностью и наличием обратной связи. Если добавить анимацию и progressbar без необходимости, можно запутать аудиторию, а не упростить решение задачи.

Отображение прогресса

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

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

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

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

Ошибки действий

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

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

Проверка данных

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

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

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

Загрузка и выполнение действий

Чаще всего индикаторы и прогресс-бары используют для скачивания и загрузки файлов. Можно пойти дальше и добавить статус выполнения к важным действиям: подписка на обновления по email, активация sim-карты и другие операции.

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

Советы по использованию

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

Объясните, что происходит

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

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

Отвлекайте от ожидания

Задача прогресс-бара заключается не только в информировании. Нестандартная анимация переключает внимание и человек забывает про ожидание. Люди не любят тратить время. Если отправка анкеты или загрузка файла будет длиться слишком долго, пострадает user experience. Чтобы избежать этого, добавьте креативную анимацию.

Показывайте время

Подсказка с длительностью выполнения задачи покажет, что у процесса есть конец. Просто напишите: «Активация подписки займет не более 3 минут. Мы проверим данные кредитной карты у платёжного агрегатора».

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

Укажите объём работы

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

Способ реализации на картинке ниже — идеальный вариант для сложных задач. Человек понимает, что 3 из 22 сообщений отправлены и надо ещё подождать.

Проведите тестирование

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

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

Добавьте плавность

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

Можно использовать простой приём, чтобы создать эффект быстрого прогресса. Сначала замедлить загрузку, а ближе к концу ускорить движение. Эта небольшая деталь увеличит интерактивность и покажет, что система работает быстро.

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

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

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

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

Веб-студия IDBI ставит пользовательский опыт на первое место. Давайте вместе разработаем идеальный UI для вашего проекта.

| Примеры прототипирования

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

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

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

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

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

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

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

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

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

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

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

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

Хотите поэкспериментировать с вводящей в заблуждение, но эффективной анимацией индикатора выполнения? Попробуйте анимировать с помощью функции ключевых кадров от Framer Motion!

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

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

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

1. Перетащите Индикатор элемент из Органы управления палитра в графическом редакторе.

Недвижимость

Общий

Имя — Название индикатора выполнения.Он используется для идентификации и доступа к элементу управления из кода.

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

Видно на верхнем агенте — Если выбрано, элемент управления будет также виден на верхнем агенте, где находится этот агент.

Ориентация — Ориентация индикатора выполнения, либо Вертикальный или же По горизонтали.

Показать строку прогресса — Если выбрано, метка отображается внутри индикатора выполнения. Обычно он используется для отображения текущего значения прогресса. Строка выполнения определяется в поле редактирования справа. Введите здесь выражение, возвращающее Нить значение, которое будет отображаться внутри элемента управления. В выражении можно использовать две локальные переменные: значение (содержит текущее значение прогресса) и процентов (содержит текущий процент прогресса).
Пример строки прогресса: процентов «процентов завершено»

Минимальное значение — Минимальное значение индикатора выполнения.

Максимальное значение — Максимальное значение индикатора выполнения.

Ценность прогресса — Выражение типа двойной что отражает ценность прогресса. Самый простой пример: чтобы индикатор выполнения отображал изменение модельного времени, введите время() здесь.

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

Действие

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

Положение и размер

Уровень — Уровень которому принадлежит этот элемент управления.

Икс — X-координата левого верхнего угла элемента управления.

Y — Координата Y верхнего левого угла элемента управления.

Ширина — Ширина элемента управления (в пикселях).

Высота — Высота элемента управления (в пикселях).

Передовой

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

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

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

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

Функции

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

Функция	Описание
двойной getValue ()	Возвращает текущее значение индикатора выполнения.
интервал getPercent ()	Возвращает прогресс в процентах (целое число от 0 до 100).
void setValue (двойное значение)	Устанавливает значение индикатора выполнения. Параметр: val — новое значение

Диапазон значений

Функция	Описание
двойной getMin ()	Возвращает минимальное значение индикатора выполнения.
двойной getMax ()	Возвращает максимальное значение индикатора выполнения.
набор пустот Диапазон (двойной мин., Двойной макс.)	Устанавливает минимальное и максимальное значения индикатора выполнения. Параметры: мин — новое минимальное значение max — новое максимальное значение

Определить режим

Функция

Описание

недействительный набор Определить (логическое значение)

Устанавливает определенное свойство индикатора выполнения, которое определяет, находится ли индикатор выполнения в определенном или неопределенном режиме.Неопределенный индикатор выполнения непрерывно отображает анимацию, указывающую на то, что выполняется операция неизвестной длительности. происходит. По умолчанию это свойство правда. Параметр: val — если истина, устанавливает индикатор выполнения в режим определения, если ложный — к неопределенному

Строка прогресса

Функция	Описание
недействителен setProgressString (Строка val)	Устанавливает Нить значение индикатора выполнения. Параметр: val — новое значение или ноль, чтобы скрыть строку прогресса

Положение управления

Функция	Описание
двойной getX ()	Возвращает координату X элемента управления (а именно координату X его верхнего левого угла).
двойной getY ()	Возвращает координату Y элемента управления (а именно координату Y его верхнего левого угла).
void setX (двойной x)	Задает координату X элемента управления. Параметр: x — новое значение координаты X
void setY (двойной y)	Задает координату Y элемента управления. Параметр: г — новое значение координаты Y
void setPos (двойной x, двойной у)	Устанавливает новые координаты для элемента управления. Параметры: x — новое значение координаты x y — новое значение координаты y

Размер контроля

Функция	Описание
двойной getWidth ()	Возвращает ширину элемента управления в пикселях.
двойной getHeight ()	Возвращает высоту элемента управления в пикселях.
void setWidth (двойная ширина)	Устанавливает ширину элемента управления равной ширина.
void setHeight (двойная высота)	Устанавливает высоту элемента управления равной высота.

Контроль видимости

Функция	Описание
логическое isVisible ()	Возвращает видимость элемента управления.
void setVisible (логическое значение v)	Устанавливает видимость элемента управления. Параметр: v — видимость: если правда — элемент становится видимым, если ложный — невидимый.

Связанные темы

: ShapeProgressBar класс

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

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

Первичные элементы

Индикаторы выполнения состоят из четырех элементов:

1. Название: Кратко передает задачу, над выполнением которой работает пользователь или система.
2. Дорожка: Визуальное руководство, описывающее пользователю, что требуется для полного выполнения задачи
3. Значение прогресса: Значение, которое помогает пользователю понять, какой прогресс был достигнут
4. Индикатор: Анимированный индикатор на дорожке, привлекающий внимание пользователя к полосе выполнения и демонстрирует прогресс пользователя в направлении завершения

Использование

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

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

Когда использовать

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

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

Определить индикатор выполнения, отображающий процент выполнения

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

Определить индикатор выполнения, отображающий оставшееся время

Вместо процента используйте значение временного интервала, например «Осталось 4 минуты», чтобы продемонстрировать значение прогресса, если процесс превышает 1 минуту; однако выберите процент, чтобы отметить значение прогресса, если процентное измерение будет более точным, чем указание времени.

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

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

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

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

Когда не использовать

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

Не используйте индикатор выполнения, если вместо него следует использовать счетчик. Не следует использовать спиннер для длительных процессов. Используйте вертушку только в том случае, если процесс займет 1-4 секунды. Счетчик никогда не заменит определенный индикатор выполнения, поскольку счетчик не предоставляет пользователю полезную информацию о времени загрузки.

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

Использование индикаторов выполнения в ваших проектах

Состояние «Выполнить» демонстрирует, что индикатор выполнения следует разместить в соответствии с соответствующим контекстом. Состояние Don’t показывает, что индикатор выполнения не должен использоваться без описательного заголовка и процента выполнения, когда это возможно. Индикатор выполнения должен быть помещен в поле зрения пользователя в качестве ориентира.

Как использовать индикатор выполнения в таблице

Если индикатор выполнения записывает ход выполнения нескольких элементов строки, держите индикатор выполнения в соответствии с элементом строки, к которому он относится.

Как использовать индикатор выполнения на панели мониторинга

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

Как использовать индикатор выполнения при загрузке файла

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

Как использовать индикатор выполнения в мастере

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

Стиль

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

Синий индикатор выполнения отображает выполняющийся процесс.

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

Зеленый индикатор выполнения показывает успешное завершение процесса, а соответствующий значок в виде галочки показывает ошибку, возникшую в процессе.

Содержание

Заголовки должны четко описывать измеряемый процесс. Старайтесь, чтобы заголовки содержали от 1 до 3 слов. Примером заголовка может быть «Загрузка вашего приложения». Вставьте в «Ваше приложение» название приложения.

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

Дополнительную информацию см. В наших правилах по содержанию.

Используемые компоненты и демонстрации

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

Компоненты HTML / CSS

Компоненты React

Как создать индикатор выполнения WordPress

Стилизация вертикальной шкалы прогресса

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

Мы решили не иметь границ на наших полосах, поэтому мы выбрали Нет под Тип границы . Мы изменили цвет активной линии (часть полосы, окрашенная в черный цвет) на # c4c4c4, а цвет неактивной линии (часть полосы над темной областью) на # f9f9f9.Мы не настраивали уровни непрозрачности, но установили толщину как активной, так и неактивной линии равной 83.

Что касается последней опции Text Style , мы вернемся к ней через минуту. Сначала мы должны ввести текст, который сопровождает индикатор выполнения, чтобы у нас было текстовое содержимое для стилизации. Для этого перейдем к разделу Content .

Здесь у вас есть возможность не только изменить текстовое содержимое, но также ввести собственный класс, указать процентное число и выбрать положение текста относительно полосы.Кроме того, виджет позволяет установить двухцветную градиентную заливку для активной части строки индикатора выполнения. Вы можете выбрать любой из двух цветов, который вам нужен, чтобы вы могли легко заставить их соответствовать цветам вашего бренда или общей цветовой палитре вашего сайта. Что касается неактивной части строки индикатора выполнения, вы можете настроить ее внешний вид, загрузив фотографию шаблона по своему вкусу. Параметр Animation Duration позволяет указать скорость анимации, при которой панель будет выглядеть так, как будто она загружается.И, наконец, вы можете ввести собственное название для индикатора выполнения.

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

Поскольку мы закончили с настройками на вкладке Content , давайте вернемся в раздел Style и рассмотрим вариант Text Style .

Здесь вы можете установить тег заголовка, выбрать цвет заголовка и внести изменения в типографику. Нажав на опцию Title Typography , вы откроете ряд новых настроек.

Вы можете изменить шрифты, установить желаемый размер и толщину букв, преобразовать буквы (вы можете сделать их прописными, строчными, заглавными или использовать обычные настройки), выбрать определенный стиль (нормальный, курсив, полужирный и наклонный), а также добавить украшение в виде подчеркивания, надстрочного подчеркивания или линии через буквы.У вас есть возможность изменить высоту строки, то есть увеличить расстояние между текстом и индикатором выполнения. И, наконец, вы можете изменить расстояние между буквами.

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

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

Мы решили использовать тег заголовка H6 и настроили цвет заголовка так, чтобы он совпадал с цветом индикатора выполнения — # c4c4c4. Мы также установили верхнее поле текста на 21 пиксель, изменили толщину шрифта числа на 500 и увеличили верхнее поле числа до 2 пикселей.

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

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

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

Progress Bar — Kaizen Design System

Visuals

UI Kit

Примеры

Опции

• Статический процесс или ход загрузки:
  • Статический : статический индикатор выполнения показывает текущий прогресс процесса, который не будет развиваться без взаимодействие с пользователем.
  • Загрузка : индикатор выполнения загрузки показывает текущий прогресс в процессе загрузки, который система будет продвигаться сама по себе без вмешательства пользователя.Мы используем анимацию, чтобы показать, что система работает.
• Реквизит:
  • Мин.
  • Макс.
  • Начальное значение
  • Бесконечное / неопределенное
• Настроение: положительное, информативное, предостерегающее, отрицательное

На заметку

Дайте людям обратную связь с индикаторами выполнения.

• Анатомия:
  • Дорожка прогресса: Эта дорожка показывает путь, по которому пойдет индикатор выполнения.
  • Заполнение индикатора выполнения: Отображает завершенный прогресс визуально в виде цветной полосы.
  • Значение прогресса: Показывает завершенный прогресс в виде текста, обычно в процентах. Иногда может отображаться дробь или соотношение.
  • Метка выполнения: Описывает текущий процесс.
• Используйте индикаторы выполнения загрузки для системных процессов, таких как загрузка, выгрузка или обработка.
• Старт индикаторов выполнения на 1% вместо 0%, чтобы показать, что процесс начался, где это имеет смысл.
• Индикатор выполнения не интерактивен.
• Избегайте использования неопределенных индикаторов выполнения. Постарайтесь оценить, сколько времени займет процесс или сколько элементов будет обработано. Индикатор выполнения может начинаться с неизвестного количества прогресса, а затем становиться определяющим.
• В языках с письмом справа налево (RTL) начните заполнять индикатор выполнения справа и заполняйте его влево по мере увеличения прогресса.
• Доступность:
  • Используйте полосу выполнения роль , чтобы показать, что элемент отображает состояние выполнения.
  • Используйте атрибуты aria-valuenow , aria-valuemin и aria-valuemax для индикации завершения процесса.

Когда использовать, а когда не использовать

Когда использовать

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

Когда не использовать

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

См. Также

Внешние ссылки

Вот несколько примеров других существующих систем проектирования:

progressbar2 · PyPI

Введение

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

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

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

Использование

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

Обертывание итерации

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

для i в progressbar.progressbar (диапазон (100)):
    время сна (0,02)
 

Прогрессбар с логированием

Progressbars с журналированием требует перенаправления stderr _ перед_ StreamHandler инициализирован. Чтобы убедиться, что поток stderr был перенаправлен вовремя, обязательно вызовите progressbar.streams.wrap_stderr () перед вы инициализируете регистратор .

Один из вариантов принудительной ранней инициализации — использование WRAP_STDERR переменная среды, в системах Linux / Unix это можно сделать с помощью:

 # WRAP_STDERR = истинный питон your_script.py
 

Если вам нужно промыть вручную во время упаковки, вы можете сделать это с помощью:

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

progressbar.streams.flush ()
 

В большинстве случаев следующее также будет работать, если вы инициализируете StreamHandler после завершения упаковки.

 время импорта
импорт журнала
индикатор выполнения импорта

progressbar.streams.wrap_stderr ()
logging.basicConfig ()

для i в progressbar.progressbar (диапазон (10)):
    logging.error ('Получил% d', i)
    time.sleep (0,2)
 

Обертка контекста

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

с progressbar.ProgressBar (max_value = 10) как бар:
    для i в диапазоне (10):
        time.sleep (0,1)
        bar.update (я)
 

Объединение индикаторов выполнения с выводом на печать

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

для i в индикаторе выполнения.индикатор выполнения (диапазон (100), redirect_stdout = True):
    print ('Некоторый текст', i)
    time.sleep (0,1)
 

Прогрессбар неизвестной длины

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

bar = progressbar.ProgressBar (max_value = progressbar.UnknownLength)
для i в диапазоне (20):
    time.sleep (0,1)
    bar.update (я)
 

Панель с широкими китайскими (или другими многобайтовыми) символами

 # vim: fileencoding = utf-8
время импорта
индикатор выполнения импорта


def custom_len (значение):
    # Эти символы занимают больше места
    characters = {
        '进': 2,
        '度': 2,
    }

    всего = 0
    для c по значению:
        всего + = символов.получить (c, 1)

    общая сумма возврата


bar = progressbar.ProgressBar (
    виджеты = [
        '进度:',
        прогрессбар.Bar (),
        '',
        progressbar.Counter (format = '% (значение) 02d /% (max_value) d'),
    ],
    len_func = custom_len,
)
для i в баре (диапазон (10)):
    time.sleep (0,1)
 

Почему индикатор выполнения лжет вам

Радио

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

Индикатор выполнения — плохой знак. Это означает, что ваш компьютер не работает, и вам нужно подождать. Разочарование от ожидания завершения процесса усугубляется еще одним досадным фактом: индикатор выполнения по сути обманывает вас. Чаще всего ваш компьютер не знает, сколько времени займет процесс, достижение отметки в 50 процентов может означать, что вы уже на полпути, или с тем же успехом это может означать, что вы только что начали.

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

Индикатор выполнения установщика приложения или файла установки на порядок сложнее индикатора выполнения загрузки.Он должен отслеживать сотни различных операций, каждая из которых зависит от внешних факторов, таких как скорость компьютера, подключение к Интернету и активность пользователей. Брэд Майерс, профессор Института взаимодействия человека и компьютера Карнеги-Меллона, говорит об этом так: «Есть много областей вычислений, где система в целом не может предсказать, сколько времени займет [задача], поэтому индикаторы выполнения не перемещаются. последовательный способ «. Оценка того, сколько времени потребуется, чтобы установить что-то столь сложное, как компьютерная игра, граничит с предположениями.

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

Крис Харрисон, доктор философии. Кандидат в Карнеги-Меллон рассматривает проблему индикатора выполнения с необычной точки зрения. Используя принципы зарождающейся области психологии, называемой временным дизайном, он придумал способ заставить индикатор выполнения чувствовать себя так, будто он движется быстрее, чем есть на самом деле. После тестирования различных паттернов движения: линейных, скачкообразных, быстрых, затем медленных вместе с разными анимациями, Харрисон пришел к самому быстрому, хотя и в корне нечестному, индикатору выполнения: индикатору, который ускоряется по мере продвижения и содержит движущуюся в обратном направлении волновую анимацию.

Увы, индикатор выполнения — необходимое зло. «К сожалению, всегда будут компьютерные программы, которые не могут быть выполнены мгновенно», — писал Майерс в своей причудливой и увлекательной статье 1985 года «Важность индикаторов выполненных процентов для интерфейсов компьютер-человек». Сегодня это утверждение остается верным: «Пока были компьютеры, были компьютеры, которые не работали достаточно быстро», — говорит Майерс PM. «Когда доступно больше компьютерных мощностей, появляется больше желания их использовать.Он добавляет: «[Индикаторы прогресса] остановятся, только если человеческий прогресс остановится». Я не могу сказать, оптимистичный это взгляд на будущее или невероятно удручающий, но я подозреваю, что это правильно.

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