Progress #

Display the current progress of an operation flow.

Import #

Examples #

Basic #

The default Progress component displays a horizontal progress bar.

Status #

Use the status prop to indicate different states: 'active', 'success', or 'fail'.

Indeterminate #

Use the indeterminate prop to display an animated loading state when the progress percentage is unknown. This creates a continuous animation effect to indicate that an operation is in progress.

Color #

Customize the progress bar color with the strokeColor prop.

Size #

Adjust the height of the progress bar using the strokeWidth prop. You can also customize the border radius with the radius prop.

Percent placement #

Control the position of the percentage indicator with the percentPlacement prop. Options include 'start', 'end', 'insideStart', 'insideEnd', and 'insideCenter'.

Striped #

Apply a striped effect to the progress bar using the striped prop. When combined with 'active' status, the stripes will animate.

Custom Info Content #

Use the renderInfo prop to customize the content displayed in the progress info area. This allows for more complex and informative displays beyond the default percentage.

Multiple Sections #

Use the sections prop to display multiple progress sections with different colors. This is useful for visualizing different parts of a process or comparing multiple values.

Vertical #

Display a vertical progress bar with the vertical prop. All other properties like status, color, and percent placement work with vertical progress bars as well.

Props #

<Progress> #

Property	Type (Default)	Description	Version
classPrefix	string ('progress-line')	The prefix of the component CSS class
indeterminate	boolean	Show indeterminate loading animation
percent	number (0)	Percent of progress
percentPlacement	'start' | 'end' | 'insideStart' | 'insideEnd' | 'insideCenter' ('end')	The placement of the percent info
radius	number | string	The radius of the progress bar
renderInfo	(percent: number, status?: 'success' | 'fail' | 'active') => ReactNode	Custom render function for info content
sections	ProgressSection[]	Multiple sections with different colors
showInfo	boolean (true)	Show text
status	'success' | 'fail' | 'active'	Progress status
striped	boolean	Whether to apply a striped effect
strokeColor	string	Line color
strokeWidth	number	Line width
trailColor	string	Trail color
trailWidth	number	Trail width
vertical	boolean	The progress bar is displayed vertically
width	number	Circle diameter

ProgressSection #

interface ProgressSection {
  /** Percent of this section */
  percent: number;

  /** Color of this section */
  color: string;

  /** Label of this section */
  label?: React.ReactNode;

  /** Tooltip of this section */
  tooltip?: React.ReactNode;
}