Определённый и неопределённый прогресс

В библиотеке React Aria компоненты прогресса предоставляют мощные средства для отображения состояния загрузки или выполнения задачи. В основе лежат два основных типа индикаторов: определённый (determinate) и неопределённый (indeterminate) прогресс.

Определённый прогресс

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

Свойства

Основные свойства компонента прогресса с определённым состоянием:

  • value – числовое значение текущего прогресса, обычно от 0 до 100.
  • minValue – минимальное значение прогресса, по умолчанию 0.
  • maxValue – максимальное значение, по умолчанию 100.
  • label – описание цели или задачи, доступное для скринридеров.
  • orientation – ориентация полосы: "horizontal" или "vertical".

Пример использования

import { ProgressBar } from '@react-aria/progress';

function FileUploadProgress({ progress }) {
  return (
    <ProgressBar
      value={progress}
      minValue={0}
      maxValue={100}
      label="Загрузка файла"
      orientation="horizontal"
    />
  );
}

В этом примере value контролирует ширину полосы прогресса и её доступность для пользователей с нарушениями зрения. React Aria автоматически добавляет ARIA-атрибуты, такие как aria-valuenow, aria-valuemin и aria-valuemax.

Неопределённый прогресс

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

Свойства

  • isIndeterminate – флаг, указывающий, что прогресс не имеет определённого значения.
  • label – описание задачи для скринридеров.
  • orientation – горизонтальная или вертикальная ориентация.

Пример использования

import { ProgressBar } from '@react-aria/progress';

function LoadingIndicator() {
  return (
    <ProgressBar
      isIndeterminate
      label="Загрузка данных"
      orientation="horizontal"
    />
  );
}

При isIndeterminate полоска прогресса отображается анимированно, показывая, что процесс выполняется, но точного значения прогресса нет. ARIA-атрибуты, такие как aria-valuenow, не задаются, но aria-busy может использоваться для обозначения занятости элемента.

Ориентация и кастомизация

React Aria позволяет гибко управлять ориентацией полосы прогресса и её визуальным отображением.

  • Горизонтальная ориентация – стандартная, удобно использовать для прогресса загрузки файлов, выполнения операций или отображения шагов.
  • Вертикальная ориентация – подходит для визуализации прогресса в узких колонках интерфейса, например, при панельной визуализации данных.
<ProgressBar
  value={75}
  orientation="vertical"
  label="Обработка данных"
/>

Визуальные стили полосы не определяются библиотекой – React Aria отвечает только за доступность и управление состоянием. Для стилизации следует использовать CSS или CSS-in-JS.

Доступность (Accessibility)

React Aria строится на принципах WAI-ARIA, что позволяет создавать полностью доступные компоненты прогресса:

  • role="progressbar" – задаёт семантический элемент.
  • aria-valuenow – текущее значение (для определённого прогресса).
  • aria-valuemin и aria-valuemax – минимальное и максимальное значение.
  • aria-label или aria-labelledby – описание цели задачи.
  • aria-busy – флаг для неопределённого прогресса.

Пример с ARIA:

<ProgressBar
  value={50}
  minValue={0}
  maxValue={100}
  label="Загрузка изображения"
/>

Для скринридеров это будет звучать как: «Загрузка изображения, прогресс 50%».

Комбинирование определённого и неопределённого прогресса

В некоторых интерфейсах полезно динамически переключать тип прогресса:

  • Пока сервер не вернул данные – показывается неопределённый прогресс.
  • После получения информации о размере задачи – переключаемся на определённый прогресс.
function DynamicProgress({ progress, isLoading }) {
  return (
    <ProgressBar
      isIndeterminate={isLoading && progress === null}
      value={progress ?? undefined}
      minValue={0}
      maxValue={100}
      label="Обновление данных"
    />
  );
}

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

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

Оглавление