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

Рисунок 4.42. Виды прогресс-баров

Виды прогресс-баров

Рисунок 4.43. Макет прогресс-бара со значениями основной и опциональной полос

Макет прогресс-бара со значениями основной и опциональной полос

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

4.8.1. Общие параметры Прогресс-баров

  • ширина прогресс-бара должна быть не менее 102 px

  • высота прогресс-бара 20 px

  • высота верхнего и нижнего уровня прогресс-бара - по 9 px соответственно

  • минимальные внешние отступы - 4 px

  • надпись в прогресс-баре выравнивается по центру как по вертикали так и по горизонтали

  • проценты на прогресс-баре меняют свой вид (если прогресс бар двухуровневый) с отображения значения одного прогресса «n%» на отображение значений основной и опциональной полосы прогресса «n% / m%»

  • стиль шрифта — MainText

  • надписи не уместившиеся в ширину прогресс-бара должны обрезаться многоточием «»

4.8.2. Цвета Прогресс-баров

Фон прогресс-бара — ButtonBg

Основная полоса прогресса — ProgressNormal

Основная полоса прогресса (для индикации прогресса просроченного процесса) — DeclineButtonBg2

Опциональная полоса прогресса — ProgressOptional

Граница прогресс-бара — Border1