react-progress-component

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