2.0.1 • Published 3 years ago
react-progress-component v2.0.1
react-progress-component
Semi circle and circle progress bar for react.
Installation
$ npm install react-progress-component --save
Semi Circle Usage
import React from 'react';
import { SemiCircleProgress } from 'react-progress-component';
function App() {
return (
<div>
<SemiCircleProgress progressValue={40} />
</div>
);
}
Semi Circle Options
Name | Type | Default Value | Description |
---|---|---|---|
totalProgress | number | 100 | Total value for the progress bar |
progressValue | number | 10 | The current progress value |
progressLabel | string | 'Progress' | Label for the progress bar |
radius | number | 50 | Radius of the circle |
strokeWidth | number | 10 | Width of the stroke for the circle |
strokeBackgroundColor | string | '#C9E8B8' | Background color for the circle |
backgroundColor | string | '#FFFFFF' | Background color for the component |
strokeColor | string | '#7AC74F' | Stroke color of the circle for the progressed area |
strokeLinecap | string | 'round' | Shape of the end of the stroke |
Circle Usage
import React from 'react';
import { CircleProgress } from 'react-progress-component';
function App() {
return (
<div>
<CircleProgress progressValue={40} strokeWidth={10} progressLabel={'Loading'} />
</div>
);
}
Circle Options
Name | Type | Default Value | Description |
---|---|---|---|
totalProgress | number | 100 | Total value for the progress bar |
progressValue | number | 10 | The current progress value |
progressLabel | string | 'Progress' | Label for the progress bar |
radius | number | 80 | Radius of the semi circle |
strokeWidth | number | 20 | Width of the stroke for the semi circle |
strokeBackgroundColor | string | '#C9E8B8' | Background color for the semi circle |
backgroundColor | string | '#FFFFFF' | Background color for the component |
strokeColor | string | '#7AC74F' | Stroke color of the semi circle for the progressed area |
strokeLinecap | string | 'round' | Shape of the end of the stroke |