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.