Progress

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

import { Progress } from "@chakra-ui/react";

<Progress value={60} />

Здесь value указывает текущий процент прогресса. Значение по умолчанию — 0, максимальное — 100.

Свойства компонента Progress

  • value – число от 0 до 100, определяет текущий прогресс.
  • size – размер полосы прогресса: "xs", "sm", "md", "lg".
  • colorScheme – цветовая схема компонента, например "blue", "green", "red".
  • hasStripe – добавляет полосы на прогресс-бар для визуального эффекта движения.
  • isAnimated – анимирует полосы при использовании hasStripe.
  • isIndeterminate – делает прогресс бесконечным, используется для неизвестной длительности задачи.
  • borderRadius – скругление углов полосы.
<Progress value={40} size="lg" colorScheme="green" borderRadius="md" />
<Progress value={75} size="sm" colorScheme="blue" hasStripe isAnimated />
<Progress isIndeterminate size="md" colorScheme="pink" />

Использование индикатора прогресса с текстом

Для отображения текста с текущим прогрессом используется комбинация Progress с обычными компонентами, такими как Box или Flex. Chakra UI позволяет легко создавать кастомные прогресс-бары с цифрами:

import { Progress, Box, Text, Flex } from "@chakra-ui/react";

<Flex align="center">
  <Box flex="1" mr="4">
    <Progress value={50} colorScheme="teal" borderRadius="md" />
  </Box>
  <Text>50%</Text>
</Flex>

Здесь Flex обеспечивает горизонтальное расположение полосы прогресса и текста. Такой подход позволяет создавать наглядные и информативные индикаторы.

Индетерминированный прогресс

Если точный процент выполнения задачи неизвестен, используется свойство isIndeterminate. Полоса будет двигаться непрерывно, показывая активность процесса:

<Progress size="lg" isIndeterminate colorScheme="purple" />

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

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

Chakra UI позволяет полностью настраивать внешний вид Progress через sx или тему:

<Progress
  value={70}
  size="md"
  colorScheme="orange"
  sx={{
    bg: "gray.200",
    "& > div": {
      borderRadius: "full",
    },
  }}
/>
  • bg — цвет фона полосы.
  • "& > div" — позволяет изменить внутреннюю полосу прогресса.
  • borderRadius: "full" — делает края полностью закругленными.

Можно также комбинировать с другими системами Chakra, например с useColorMode для автоматической адаптации к светлой и темной теме.

Вертикальный прогресс

По умолчанию Progress горизонтальный, но с помощью CSS можно сделать вертикальный:

<Progress
  value={60}
  orientation="vertical"
  height="200px"
  colorScheme="cyan"
/>

Свойство orientation принимает "horizontal" или "vertical". Высота (height) задает визуальный размер вертикального прогресс-бара.

Применение в сложных интерфейсах

Компонент Progress часто комбинируется с карточками, списками задач, панелями статистики:

<Box w="300px" p="4" borderWidth="1px" borderRadius="md">
  <Text mb="2">Загрузка данных</Text>
  <Progress value={30} colorScheme="blue" hasStripe isAnimated />
</Box>

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

Заключение по функциональности Progress

Progress в Chakra UI — гибкий и мощный инструмент для отображения выполнения задач. Он поддерживает:

  • Стандартные и бесконечные прогресс-бары.
  • Настройку размеров и цветовых схем.
  • Анимацию и полосы для динамического эффекта.
  • Вертикальную ориентацию и текстовые индикаторы.
  • Полную интеграцию с темой и кастомными стилями.

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

Оглавление