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

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import CircularStatusIndicator from 'react-npm-circular-status-indicator';

class App extends Component {
  render() {
    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.render(<App />,document.querySelector('.container'));

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