Индикатор прогресса — это элемент интерфейса, который наглядно отображает ход выполнения процесса или степень завершенности задачи. Он помогает пользователю понять, сколько времени может занять операция, и предоставляет визуальную обратную связь о текущем статусе. Такой элемент корректно использовать для отображения состояния загрузки файла, заполнения формы или этапа в многошаговом процессе.
Базовая анатомия
Основа индикатора — это трек, который показывает полную длину процесса. Внутри трека движется заполнение, отражающее текущий прогресс. Пропорции и размеры должны обеспечивать чёткую видимость даже небольших изменений. Можно добавить текстовое отображение процента выполнения.
Анатомия с дополнительными элементами
Элемент может дополняться поясняющим текстом, описывающим текущий этап или оставшееся время. При необходимости добавляются метки ключевых этапов или промежуточные деления. Для более сложных процессов следует использовать несколько параллельных индикаторов.
Необходимо, чтобы индикатор прогресса постоянно отражал изменения в процессе выполнения задачи, обеспечивая постоянную обратную связь.
Default
В начальном состоянии индикатор показывает нулевой или начальный прогресс. Трек должен быть заметным, но не отвлекающим от основного контента.
Hover
При наведении может появляться дополнительная информация: точный процент, оставшееся время или описание текущего этапа. Однако, такие составляющие могут присутствовать и по дефолту.
Active
В процессе заполнения движение должно быть плавным, без резких скачков, а при длительных операциях стоит использовать пульсацию или анимацию заполнения для еще большего подтверждения активности.
Disabled
В неактивном состоянии индикатор сохраняет текущее значение, но визуально показывает, что процесс приостановлен или недоступен.
