CircularProgress

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

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

import { CircularProgress, CircularProgressLabel } from "@chakra-ui/react";

<CircularProgress value={50} size="120px" thickness="8px" color="green.400">
  <CircularProgressLabel>50%</CircularProgressLabel>
</CircularProgress>
  • value — число от 0 до 100, определяющее процент заполнения круга.
  • size — диаметр круга, можно указывать в пикселях или в единицах Chakra (например, "lg").
  • thickness — толщина линии прогресс-бара.
  • color — цвет заполненной части круга.

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

Динамическое обновление значения

Прогресс можно обновлять динамически, используя состояние React. Например, для имитации процесса загрузки:

import { useState, useEffect } from "react";
import { CircularProgress, CircularProgressLabel } from "@chakra-ui/react";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <CircularProgress value={progress} color="blue.500" size="100px">
      <CircularProgressLabel>{progress}%</CircularProgressLabel>
    </CircularProgress>
  );
}
  • useState и useEffect позволяют контролировать и обновлять значение прогресса.
  • Интервал имитирует процесс, автоматически увеличивая значение на заданный шаг.
  • При достижении 100% значение может сбрасываться или оставаться фиксированным.

Настройка внешнего вида

Chakra UI предоставляет гибкие возможности для кастомизации:

  • trackColor — задаёт цвет фона круга (трек, который не заполнен).
  • capIsRound — делает концы линии прогресса закруглёнными.
  • thickness — можно менять для визуальной плотности линии.

Пример с кастомизацией:

<CircularProgress
  value={75}
  size="120px"
  thickness="12px"
  color="pink.400"
  trackColor="gray.100"
  capIsRound
>
  <CircularProgressLabel>75%</CircularProgressLabel>
</CircularProgress>
  • trackColor="gray.100" создаёт мягкий контраст между заполненной и незаполненной частью.
  • capIsRound добавляет плавные, округлые концы линии, что визуально улучшает вид.

Интеграция с анимацией и эффектами

CircularProgress поддерживает плавное изменение значения с помощью CSS-переходов. Для более сложной анимации можно использовать Chakra UI motion компоненты или библиотеку framer-motion.

Пример плавного увеличения значения:

import { motion } from "framer-motion";
import { CircularProgress, CircularProgressLabel } from "@chakra-ui/react";

const MotionCircularProgress = motion(CircularProgress);

function AnimatedProgress({ value }) {
  return (
    <MotionCircularProgress
      value={value}
      size="100px"
      color="teal.400"
      thickness="10px"
      animate={{ value }}
      transition={{ duration: 0.5 }}
    >
      <CircularProgressLabel>{value}%</CircularProgressLabel>
    </MotionCircularProgress>
  );
}
  • Использование motion позволяет анимировать не только прогресс, но и другие свойства, включая цвет и толщину.
  • transition контролирует скорость и тип анимации.

Комплексные применения

CircularProgress удобно использовать для:

  • Загрузки файлов или данных — можно динамически отслеживать прогресс загрузки.
  • Мониторинга показателей — CPU, память, задачи, задачи с прогрессом в процентах.
  • UI-эффектов — например, круговые индикаторы активности вместо стандартных спиннеров.

Пример интеграции с текстовым описанием процесса:

<Box textAlign="center">
  <CircularProgress value={60} color="orange.400" size="120px" thickness="10px">
    <CircularProgressLabel>60%</CircularProgressLabel>
  </CircularProgress>
  <Text mt={2} fontSize="lg" color="gray.600">
    Обработка данных
  </Text>
</Box>
  • Комбинация Box и Text позволяет создавать полноценные информативные виджеты с визуальным прогрессом и пояснением.

Итоговые возможности

Chakra UI CircularProgress сочетает в себе простоту использования и гибкость:

  • Статическое и динамическое отображение прогресса.
  • Центрированный текст и кастомные метки.
  • Настройка цветов, толщины и формы линии.
  • Плавные анимации с использованием motion.
  • Легкая интеграция с другими компонентами Chakra UI.

Благодаря этим возможностям, CircularProgress подходит для создания как минималистичных индикаторов, так и сложных визуальных панелей прогресса.

Оглавление