Определение

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

Функциональность

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

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

Дизайн и Стиль

Размер и Форма

Progress bar должен быть компактным, но при этом достаточно заметным, чтобы пользователь мог быстро оценить ход выполнения задачи.

Цвет и Контраст

Progress bar остается видимым даже на разноцветных фонах, обеспечивая удобное восприятие и контрастность независимо от цвета фона. Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

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

Параметры

Progress bar позволяет плавно переключаться по шкале заполнения от 0% до 100% с шагом в 10%. При необходимости можно отобразить или скрыть процент загрузки, в зависимости от контекста и требований к визуализации процесса.

Состояния

Progress bar поддерживает разные состояния в зависимости от типа отображаемого процесса. Например, зелёный цвет используется для успешных действий, красный сигнализирует об ошибке, а синий отображает состояние текущей загрузки.

Анатомия