Determinate и indeterminate режимы

В библиотеке MUI (Material-UI) для React-компонентов индикаторы прогресса (Progress) реализуются через компонент CircularProgress и LinearProgress. Основная цель этих компонентов — визуально отображать завершенность какой-либо операции. Ключевым аспектом является различие между determinate и indeterminate режимами, которые управляют поведением и визуализацией прогресса.

Determinate режим

Determinate (определённый) режим используется, когда известен точный процент выполнения операции. Это позволяет пользователю видеть конкретный прогресс и оценивать, сколько осталось до завершения. В MUI этот режим активируется свойством variant="determinate".

Пример использования LinearProgress в determinate режиме:

import LinearProgress from '@mui/material/LinearProgress';
import { useState, useEffect } from 'react';

function DeterminateLinear() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress >= 100) {
          return 100;
        }
        return oldProgress + 10;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <LinearProgress variant="determinate" value={progress} />;
}

Ключевые моменты determinate режима:

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

CircularProgress в determinate режиме работает аналогично:

import CircularProgress from '@mui/material/CircularProgress';

<CircularProgress variant="determinate" value={50} />
  • Свойство value определяет заполнение круга.
  • Можно комбинировать с size и thickness для кастомизации внешнего вида индикатора.

Indeterminate режим

Indeterminate (неопределённый) режим используется, когда неизвестна продолжительность операции. В этом случае индикатор отображает анимацию, сигнализируя, что процесс выполняется, но без указания конкретного прогресса. В MUI он задается через variant="indeterminate". Свойство value в этом режиме не используется.

Пример LinearProgress в indeterminate режиме:

<LinearProgress variant="indeterminate" />

Пример CircularProgress в indeterminate режиме:

<CircularProgress />

(По умолчанию CircularProgress без указания variant использует indeterminate режим.)

Особенности indeterminate режима:

  • Используется для операций с неизвестным временем выполнения.
  • Анимация прогресса циклична: линия движется непрерывно (Linear) или круг вращается (Circular).
  • Можно кастомизировать скорость анимации через classes и стили, но значение value игнорируется.

Сравнение режимов и рекомендации

Режим Когда использовать Свойства
Determinate Когда известен прогресс (0–100%) variant="determinate", value
Indeterminate Когда прогресс неизвестен variant="indeterminate" (Linear), default (Circular)

Дополнительные возможности кастомизации:

  • Цвет индикатора: color="primary" | "secondary" | "inherit".
  • Размер и толщина: size и thickness для CircularProgress; высота и стили для LinearProgress.
  • Стилизация через SX: можно управлять цветами, анимацией и отступами через свойство sx.

Пример кастомного CircularProgress:

<CircularProgress
  variant="determinate"
  value={75}
  size={60}
  thickness={5}
  sx={{
    color: 'green',
  }}
/>

Практическая интеграция

В реальных приложениях часто используют комбинацию режимов:

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

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

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

Оглавление