Progress

Компонент Progress библиотеки Ant Design предназначен для визуализации прогресса выполнения операций. Он поддерживает различные типы отображения, а также настройку стилей, размеров и состояний.

Основные типы прогресс-бара

  1. Line (линейный прогресс) Наиболее часто используемый тип, представляющий собой горизонтальную линию, заполняющуюся по мере выполнения задачи.
import { Progress } from 'antd';

<Progress percent={70} />;
  • percent — процент заполнения, принимает значения от 0 до 100.
  • status — состояние прогресса: 'success', 'active', 'exception', 'normal'.
  • strokeWidth — толщина линии.
  • showInfo — отображение процента в виде текста (по умолчанию true).

Пример с изменённой толщиной и цветом:

<Progress percent={50} strokeWidth={12} strokeColor="#52c41a" />
  1. Circle (круговой прогресс) Отображает прогресс в виде окружности, где заполнение пропорционально значению percent.
<Progress type="circle" percent={75} />
  • width — размер окружности.
  • strokeColor — цвет линии.
  • Можно комбинировать с градиентами:
<Progress
  type="circle"
  percent={80}
  strokeColor={{
    '0%': '#108ee9',
    '100%': '#87d068',
  }}
/>
  1. Dashboard (панельный прогресс) Частный тип кругового прогресса, напоминающий спидометр. Подходит для визуализации достижений или KPI.
<Progress type="dashboard" percent={60} />
  • gapDegree — угол “разрыва” в окружности (например, 75 градусов для спидометрного эффекта).
  • gapPosition — положение разрыва: 'top', 'bottom', 'left', 'right'.
<Progress type="dashboard" percent={70} gapDegree={90} gapPosition="bottom" />

Состояния прогресс-бара

Компонент поддерживает несколько визуальных состояний:

  • normal — стандартный прогресс, серый фон, синий заполненный сегмент.
  • active — анимация движения заполнения.
  • exception — красный цвет для ошибок.
  • success — зеленый, используется при успешном завершении задачи.
<Progress percent={50} status="active" />
<Progress percent={50} status="exception" />
<Progress percent={100} status="success" />

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

  • strokeColor может быть строкой с цветом или объектом градиента.
  • Для линейного прогресса поддерживается success с отдельным цветом:
<Progress
  percent={60}
  strokeColor="#108ee9"
  success={{
    percent: 30,
    strokeColor: '#52c41a',
  }}
/>

Размер и отображение текста

  • size — доступные значения: 'small', 'default', 'large' (для кругового типа width задаётся вручную).
  • showInfo={false} скрывает процент или иконку состояния.
  • Можно кастомизировать текст с помощью format:
<Progress
  percent={75}
  format={percent => `${percent} дней`}
 />

Интерактивное обновление

Прогресс можно динамически изменять через состояние компонента или пропсы:

import React, { useState, useEffect } from 'react';
import { Progress, Button } from 'antd';

const DynamicProgress = () => {
  const [percent, setPercent] = useState(0);

  const increase = () => setPercent(prev => (prev < 100 ? prev + 10 : 100));

  return (
    <>
      <Progress percent={percent} />
      <Button onCl ick={increase}>Увеличить</Button>
    </>
  );
};
  • Позволяет строить динамичные интерфейсы, где прогресс зависит от действий пользователя или загрузки данных.

Комбинирование с другими компонентами

  • Часто используется совместно с Button, Upload, Table для отображения прогресса загрузки файлов или выполнения операций.
  • Можно помещать внутри Card для компактного визуального отчёта:
import { Card, Progress } from 'antd';

<Card title="Задачи">
  <Progress percent={40} />
  <Progress percent={80} status="active" />
</Card>

Адаптивность и мобильное отображение

  • Компонент корректно масштабируется под различные размеры экранов.
  • Для кругового типа рекомендуется задавать width меньше на мобильных устройствах, чтобы не выходил за границы контейнера.
<Progress type="circle" percent={70} width={80} />

Ключевые моменты при использовании Progress

  • Выбор типа зависит от задачи: линейный для загрузок, круговой для KPI и спидометров.
  • Использовать status для обозначения состояния операции: успех, ошибка или активность.
  • Градиентные цвета повышают визуальную информативность.
  • Динамическое обновление через состояния React позволяет строить интерактивные интерфейсы.
  • Настраиваемый format делает отображение прогресса более информативным, например, в единицах времени или задач.

Компонент Progress Ant Design обеспечивает гибкую визуализацию прогресса с возможностью полной кастомизации внешнего вида и поведения, что делает его универсальным инструментом для интерфейсов управления задачами и отображения загрузки.

Оглавление