@rc-component/progress

When using the Circle progress component, you can provide a StrokeColorObject to the color prop to create a color gradient. This object defines color stops based on percentage keys.

To create a gradient, pass an object where the keys are strings representing the percentage (e.g., '0', '50', '100') and the values are valid CSS color strings. The component uses these to generate both conic-gradient and linear-gradient backgrounds to ensure the progress bar renders correctly across different stroke styles.

Note: The component internally calculates the distribution of these colors based on the gapDegree and the total scale of the circle.

// Example of a color gradient configuration
const gradientColor = {
  '0': '#ff0000',   // Red at 0%
  '50': '#00ff00', // Green at 50%
  '100': '#0000ff' // Blue at 100%
};

// This would be passed to the progress component's color prop
<Progress color={gradientColor} ... />

Both Line and Circle components share the following properties for configuration and styling:

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `className` | string | - | 根节点的附加 className。 |
| `classNames` | Partial<Record<'root' \| 'rail' \| 'track', string>> | - | 内部插槽的语义化 className。 |
| `gapDegree` | number | - | 环形进度缺口角度。 |
| `gapPosition` | `'top'` \| `'right'` \| `'bottom'` \| `'left'` | `'bottom'` | 循环进度的间隙位置。 |
| `id` | string | - | 根元素 ID。 |
| `loading` | boolean | false | 渲染不确定的加载动画。 |
| `onClick` | React.MouseEventHandler | - | 单击根 SVG 的处理程序。 |
| `percent` | number \| number[] | 0 | 进度百分比。数组会渲染多条轨道。 |
| `prefixCls` | string | `'rc-progress'` | 前缀 className。 |
| `railColor` | string | `'#D9D9D9'` | 导轨颜色。 |
| `railWidth` | number | 1 | 导轨行程宽度。 |
| `steps` | number \| { count: number; gap: number } | - | 以离散步骤渲染进度。 |
| `strokeColor` | string \| Record<string, string \| boolean> \| Array<string \| Record<string, string \| boolean>> | `'#2db7f5'` | 轨道颜色、渐变对象或每条轨道的颜色。 |
| `strokeLinecap` | `'round'` \| `'butt'` \| `'square'` | `'round'` | 描边端点样式。 |
| `strokeWidth` | number | 1 | 轨道描边宽度。 |
| `style` | React.CSSProperties | - | 根样式。 |
| `styles` | Partial<Record<'root' \| 'rail' \| 'track', React.CSSProperties>> | - | 内部插槽的语义化样式。 |
| `transition` | string | - | 用于跟踪更新的 CSS 过渡。 |

The Circle component renders a circular progress indicator. It supports single or multiple percentage values, segmented steps, and loading states. You can customize its appearance using props like strokeWidth, railWidth, strokeColor, and railColor.

Key Features

• Single/Multiple Percentages: Pass a single number or an array of numbers to percent to show layered progress.
• Steps Mode: Pass a steps object to divide the circle into equal segments.
• Loading State: Set loading to true to trigger an indeterminate animation.
• Gaps: Use gapDegree to create a gap in the progress ring.
• Custom Styling: Use classNames and styles to target specific parts of the component like the root, track, or rail.

import Circle from '@rc-component/progress/lib/Circle';

// Basic usage
<Circle percent={50} />

// Multiple layers
<Circle percent={[30, 50]} strokeColor={['#1890ff', '#1890ff']} />

// Steps mode
<Circle 
  percent={50} 
  steps={{ count: 4, gap: 2 }} 
  strokeColor={['#1890ff']} 
/>

// Loading state
<Circle loading percent={50} />

The Progress component accepts a ProgressProps object to control its appearance, behavior, and styling. Key configuration options include:

• Value & State:
  • percent: The progress value. Accepts a single number or an array of number[] for multi-segment progress.
  • loading: A boolean to indicate a loading state.
• Styling & Colors:
  • strokeColor: Defines the color of the progress bar. Can be a string, a StrokeColorObject, or an array of these types.
  • railColor: A string defining the color of the track.
  • strokeWidth: A number for the thickness of the progress line.
  • railWidth: A number for the thickness of the track.
  • strokeLinecap: Controls the end of the stroke. Options: 'round', 'butt', or 'square'.
  • styles: A partial record of React.CSSProperties mapped to SemanticName ('root', 'rail', or 'track').
  • classNames: A partial record of CSS class strings mapped to SemanticName ('root', 'rail', or 'track').
• Layout & Gaps:
  • steps: Defines segmenting. Can be a number or an object { count: number; gap: number }.
  • gapDegree: A number defining the size of gaps between segments.
  • gapPosition: The position of gaps. Options: 'top', 'right', 'bottom', or 'left'.
• Interaction:
  • onClick: A React.MouseEventHandler for click events on the component.

<Progress 
  percent={50} 
  strokeColor="#1890ff" 
  strokeWidth={10} 
  railWidth={10} 
  strokeLinecap="round"
/>