LinearProgress для линейной загрузки

LinearProgress — это компонент библиотеки MUI, предназначенный для отображения прогресса выполнения операции в виде линейной полосы. Он применяется для визуального информирования пользователей о состоянии загрузки или выполнения долгих операций.

Основное использование

Компонент импортируется из @mui/material:

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

Базовый пример:

<LinearProgress />

В этом случае отображается индетерминированная полоска, которая движется бесконечно, показывая, что процесс выполняется, но точный процент неизвестен.

Типы прогресса

LinearProgress поддерживает два режима:

  1. Indeterminate — состояние по умолчанию, когда прогресс не измеряется точно. Полоса анимирована и бесконечно движется слева направо.
<LinearProgress />
  1. Determinate — состояние, когда известен процент выполнения операции. В этом режиме используется свойство value, принимающее число от 0 до 100.
<LinearProgress variant="determinate" value={50} />
  • variant="determinate" активирует режим отображения конкретного процента.
  • value={число} задаёт текущий процент выполнения.

Стилизация и кастомизация

LinearProgress можно настраивать с помощью свойств color, sx и classes.

  • color: определяет цвет полосы. Поддерживаются стандартные цвета темы: primary, secondary, либо кастомные через sx.
<LinearProgress color="secondary" />
  • sx: позволяет задать CSS-свойства напрямую.
<LinearProgress
  sx={{
    height: 10,
    borderRadius: 5,
    backgroundColor: 'lightgray',
    '& .MuiLinearProgress-bar': {
      backgroundColor: 'green',
    },
  }}
/>
  • classes: для более детальной кастомизации через CSS-классы.

Анимация прогресса

Для indeterminate режима MUI автоматически добавляет анимацию. Для determinate можно обновлять значение через состояние:

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

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

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

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

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

Такой подход позволяет плавно отображать процесс выполнения операций.

Интеграция с другими компонентами

LinearProgress часто используют вместе с кнопками, карточками или модальными окнами для отображения состояния загрузки:

import Button from '@mui/material/Button';
import LinearProgress from '@mui/material/LinearProgress';
import Box from '@mui/material/Box';

<Box sx={{ width: '100%' }}>
  <Button variant="contained">Загрузить</Button>
  <LinearProgress sx={{ mt: 2 }} />
</Box>

Использование в Box или Stack позволяет легко управлять позиционированием и отступами.

Адаптивное использование

  • Высота полосы регулируется через sx={{ height: <число> }}.
  • Можно менять радиус скругления с помощью borderRadius.
  • Для темной темы следует контролировать фон полосы и цвет заполнения через sx или color, чтобы сохранить контрастность.

Состояние buffer

LinearProgress поддерживает variant="buffer", который позволяет отображать два значения:

  • value — текущий прогресс.
  • valueBuffer — загруженное или подготовленное состояние, которое визуально отличается от основного прогресса.
<LinearProgress variant="buffer" value={50} valueBuffer={70} />

Полоса valueBuffer отображается как слегка прозрачный фон, а value — как основной цвет. Это полезно для ситуаций с кэшированием или предварительной загрузкой ресурсов.

Принципы использования

  • Для краткосрочных операций лучше использовать determinate с точным значением прогресса.
  • Для длительных операций с неизвестной длительностью — indeterminate.
  • Buffer-режим эффективен при асинхронной загрузке данных с предварительным кэшированием.

LinearProgress — мощный инструмент для визуализации прогресса, легко интегрируемый с другими компонентами MUI и полностью настраиваемый через темы и CSS-in-JS.

Оглавление