CircularProgress для круговой загрузки

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

Основные свойства

  1. variant Определяет стиль индикатора:

    • indeterminate (по умолчанию) — круг вращается непрерывно, сигнализируя о процессе без точного прогресса.
    • determinate — круг заполняется пропорционально значению свойства value, показывая конкретный процент выполнения.

  2. value Используется только при variant="determinate". Принимает число от 0 до 100, определяющее заполнение круга в процентах.

    <CircularProgress variant="determinate" value={75} />

  3. color Управляет цветом индикатора. Возможные значения: primary, secondary, inherit, или кастомный цвет через sx или style.

    <CircularProgress color="secondary" />

  4. size Размер индикатора в пикселях. По умолчанию — 40px.

    <CircularProgress size={60} />

  5. thickness Толщина линии круга. По умолчанию — 3.6.

    <CircularProgress thickness={5} />

  6. disableShrink Для индетерминированного варианта: отключает эффект сжатия анимации, делая вращение равномерным.

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

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

export default function Loader() {
  return (
    <div>
      <CircularProgress />
      <CircularProgress color="secondary" size={50} />
      <CircularProgress variant="determinate" value={50} />
    </div>
  );
}

В этом примере демонстрируются три варианта: стандартный индетерминированный, цветной и детерминированный с прогрессом 50%.

Анимация и стилизация

MUI позволяет полностью кастомизировать CircularProgress с помощью sx, style или класса className. Например:

<CircularProgress
  sx={{
    color: 'green',
    animationDuration: '1.5s'
  }}
  size={80}
  thickness={6}
/>
  • animationDuration задаёт скорость вращения круга.
  • Через color можно менять цвет без использования темы.
  • Размер и толщина позволяют подстроить компонент под дизайн интерфейса.

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

Для детерминированного варианта часто используют стейт для динамического изменения прогресса:

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

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

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

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

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

Сочетание с текстом и индикаторами

Часто требуется показывать значение прогресса внутри круга. Для этого используют контейнер с позиционированием:

import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

function CircularWithLabel({ value }) {
  return (
    <Box position="relative" display="inline-flex">
      <CircularProgress variant="determinate" value={value} />
      <Box
        top={0}
        left={0}
        bottom={0}
        right={0}
        position="absolute"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Typography variant="caption" component="div" color="text.secondary">
          {`${Math.round(value)}%`}
        </Typography>
      </Box>
    </Box>
  );
}

В этом примере текст с процентом находится точно по центру круга, обеспечивая наглядность прогресса.

Адаптация к различным темам

CircularProgress хорошо интегрируется с темами MUI. Используя theme.palette, можно автоматически подстраивать цвет индикатора под текущую тему интерфейса:

<CircularProgress sx={{ color: (theme) => theme.palette.success.main }} />

Это обеспечивает единый визуальный стиль без ручного изменения цвета при переключении светлой и тёмной темы.

Вывод

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

Оглавление