react-npm-circular-status-indicator
A React component to display coloured animated circular progress bar with percentage variations.
Overview
A minimal usage will just display coloured circular percentage bar with animation.
let percentage = 75
<CircularStatusIndicator>{percentage}</CircularStatusIndicator>;
The color of the bar by default would be based on the range of the percentage, so:
Range | Default |
---|---|
0-25 | red |
26-50 | yellow |
51-75 | blue |
76-100 | green |
This might have a default height/width of 100px
But User can override:
let percentage = 75
<CircularStatusIndicator radius={50}>{percentage}</CircularStatusIndicator>;
Other options can be passed in as inverted
like so:
let percentage = 75
<CircularStatusIndicator inverted={true}>{percentage}</CircularStatusIndicator>;
In this case, the colors would be reversed;
Range | Default |
---|---|
0-25 | green |
26-50 | blue |
51-75 | yellow |
76-100 | red |
final possibility is where the colour of the bar is passed in as a prop:
<CircularStatusIndicator colour={'#FFC000'}>75</CircularStatusIndicator>
The only additional prop needed would be a text label, 50% font size of the percentage, placed above it and centered of course
<CircularStatusIndicator radius='{200}' textLabel={'Hello!'}>75</CircularStatusIndicator>
Features
- Display circular percentage bar.
- Dispay default coloured bar according to prercentage.
- Dispay inverted coloured bar according to prercentage.
- Display colured percentage bar according to color pass through params.
- Display colured percentage bar according to radius passed through params .
- Display percentage label inside the circle with result label passed through params
- Runs in the browser and Node.js.
- Built on standards.
Example
;;; { return <div> <h2>Circular Status Indicator</h2> <CircularStatusIndicator textLabel='Default'>80</CircularStatusIndicator> <CircularStatusIndicator inverted=true textLabel='Inverted'>80</CircularStatusIndicator> <CircularStatusIndicator colour='#04c3ff' textLabel='Colour'>80</CircularStatusIndicator> <CircularStatusIndicator radius=200 textLabel='Radius'>70</CircularStatusIndicator> <CircularStatusIndicator radius=50>40</CircularStatusIndicator> </div> ; } ReactDOM;
Technology Stack:
- react
- mocha
Usage:
Clone the repo as a new project:
git clone https://github.com/lobdev/react-npm-circular-status-indicator <circular-status-indicator>
Start Server:
First you have to replace the lib/component/circular_status_indicator.js to server.js in package.json
cd circular-status-indicator
npm i
npm start
Run App:
npm start command automatically initiate browser at 3000 port
http:://localhost:3000
Run tests:
cd circular-status-indicator
npm i
npm test
Developer Notes:
Make sure you configure your editor/IDE to use:
.editorconfig
.eslintrc