Skip to content

README.md

Latest commit

 

History

History
115 lines (90 loc) · 4.38 KB

README.md

File metadata and controls

115 lines (90 loc) · 4.38 KB
Raw

@rc-component/progress

Ant Design Part of the Ant Design ecosystem.

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

NPM version npm downloads build status Codecov bundle size dumi

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.