@rc-component/progress

_{Part of the Ant Design ecosystem.}

📊 Lightweight React line and circle progress indicators with SVG rendering.

English | 简体中文

Highlights

• Line and Circle progress components rendered with SVG.
• Single value, segmented value, gradient color, and indeterminate loading states.
• Semantic classNames and styles slots for root, rail, and track customization.
• TypeScript definitions for the shared progress props.

Install

npm install @rc-component/progress

Usage

import { Circle, Line } from '@rc-component/progress';
export default () => (
  <>
    <Line percent={42} strokeWidth={4} strokeColor="#1677ff" />
    <Circle percent={75} strokeWidth={6} strokeColor="#52c41a" />
  </>
);

import { Circle } from '@rc-component/progress';
export default () => (
  <Circle
    percent={[30, 20, 10]}
    strokeWidth={6}
    strokeColor={['#1677ff', '#52c41a', '#faad14']}
    railWidth={6}
  />
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Line and Circle share the same base props.

Name	Type	Default	Description
className	string	-	Additional class name for the root node.
classNames	Partial<Record<'root' | 'rail' | 'track', string>>	-	Semantic class names for internal slots.
gapDegree	number	-	Gap degree for circle progress.
gapPosition	'top' | 'right' | 'bottom' | 'left'	'bottom'	Gap position for circle progress.
id	string	-	Root element id.
loading	boolean	false	Render an indeterminate loading animation.
onClick	React.MouseEventHandler	-	Click handler for the root SVG.
percent	number | number[]	0	Progress percent. Arrays render multiple tracks.
prefixCls	string	'rc-progress'	Prefix class name.
railColor	string	'#D9D9D9'	Rail color.
railWidth	number	1	Rail stroke width.
steps	number | { count: number; gap: number }	-	Render progress as discrete steps.
strokeColor	string | Record<string, string | boolean> | Array<string | Record<string, string | boolean>>	'#2db7f5'	Track color, gradient object, or per-track colors.
strokeLinecap	'round' | 'butt' | 'square'	'round'	Stroke line cap.
strokeWidth	number	1	Track stroke width.
style	React.CSSProperties	-	Root style.
styles	Partial<Record<'root' | 'rail' | 'track', React.CSSProperties>>	-	Semantic styles for internal slots.
transition	string	-	CSS transition for track updates.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/progress is released under the MIT license.