rc-progress

Progress Bar.

[![NPM version][npm-image]][npm-url] ![dumi](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]

[npm-image]: http://img.shields.io/npm/v/rc-progress.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-progress
[github-actions-image]: https://github.com/react-component/progress/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/progress/actions
[circleci-image]: https://img.shields.io/circleci/react-component/progress/master?style=flat-square
[circleci-url]: https://circleci.com/gh/react-component/progress
[coveralls-image]: https://img.shields.io/coveralls/react-component/progress.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/progress?branch=master
[david-url]: https://david-dm.org/react-component/progress
[david-image]: https://david-dm.org/react-component/progress/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/progress?type=dev
[david-dev-image]: https://david-dm.org/react-component/progress/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-progress.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-progress
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-progress
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-progress

Example

https://progress.react-component.vercel.app/

Screenshots

Browsers

* support IE9+, Chrome, Firefox, Safari

Install

![rc-progress](https://npmjs.org/package/rc-progress)

Usage

``js import { Line, Circle } from 'rc-progress';

export default () => ( <> );`

`Compatibility`

| IE / Edge | Firefox | Chrome | Safari | Electron | | --- | --- | --- | --- | --- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

`API`

`$3`

name	type	default	description
strokeWidth	Number	1	Width of the stroke. Unit is percentage of SVG canvas size.
strokeColor	String	#2db7f5	Stroke color.
trailWidth	Number	1	Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth is not defined, it is the same as strokeWidth.
trailColor	String	#D9D9D9	Color for lighter trail stroke underneath the actual progress path.
strokeLinecap	String	'round'	The shape to be used at the end of the progress bar: can be butt`,` square `or` round`.`
prefixCls	String	rc-progress	prefix className for component
className	String		customized className
style	Object		style object will be added to svg element
percent	Number \| Number[]	0	the percent of the progress
gapDegree	Number	0	the gap degree of half circle, 0 - 360
gapPosition	String	top	the gap position: can be top`,` bottom`,` left`, or` right`.`

`Installation`

`npm install --save rc-progress`

`Development`

`npm install npm start``

License

rc-progress is released under the MIT license.