2.0.1 • Published 2 years ago

react-progress-component v2.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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

NameTypeDefault ValueDescription
totalProgressnumber100Total value for the progress bar
progressValuenumber10The current progress value
progressLabelstring'Progress'Label for the progress bar
radiusnumber50Radius of the circle
strokeWidthnumber10Width of the stroke for the circle
strokeBackgroundColorstring'#C9E8B8'Background color for the circle
backgroundColorstring'#FFFFFF'Background color for the component
strokeColorstring'#7AC74F'Stroke color of the circle for the progressed area
strokeLinecapstring'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

NameTypeDefault ValueDescription
totalProgressnumber100Total value for the progress bar
progressValuenumber10The current progress value
progressLabelstring'Progress'Label for the progress bar
radiusnumber80Radius of the semi circle
strokeWidthnumber20Width of the stroke for the semi circle
strokeBackgroundColorstring'#C9E8B8'Background color for the semi circle
backgroundColorstring'#FFFFFF'Background color for the component
strokeColorstring'#7AC74F'Stroke color of the semi circle for the progressed area
strokeLinecapstring'round'Shape of the end of the stroke