react-component/progress

README

@rc-component/progress

_{Part of the Ant Design ecosystem.}

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

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}
  />
);

The SVG is decorative by default. When using it as the progress indicator itself, provide progress semantics and an accessible name with standard SVG/ARIA props:

<Line
  percent={42}
  role="progressbar"
  aria-label="Upload progress"
  aria-valuemin={0}
  aria-valuemax={100}
  aria-valuenow={42}
/>

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.

Standard SVG attributes, including role and aria-*, are forwarded to the root SVG.

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.