Part of the Ant Design ecosystem.
đ Lightweight React line and circle progress indicators with SVG rendering.
English | įŽäŊä¸æ
LineandCircleprogress components rendered with SVG.- Single value, segmented value, gradient color, and indeterminate loading states.
- Semantic
classNamesandstylesslots for root, rail, and track customization. - TypeScript definitions for the shared progress props.
npm install @rc-component/progress
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} />
Run the local dumi site:
npm install npm start
Then open http://localhost:8000.
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.
npm install
npm start
npm test
npm run tsc
npm run compile
npm run buildThe dumi site runs at http://localhost:8000 by default.
npm run prepublishOnly
The release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/progress is released under the MIT license.