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 --saveSemi 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 |