react-progressbars-with-indicator

A semicircle progress bar with an indicator for React applications. Originally forked from react-semicircle-progressbar

Installation

Use the package manager npm to install react-progressbars-with-indicator.

npm install react-progressbars-with-indicator

Usage

Semicircle Progress Bar

import React from 'react';
import SemiCircleProgressWithIndicator from 'react-progressbars-with-indicator';

function App() {
  return (
      <div>
        <SemiCircleProgressWithIndicator
            percentage={80}
            indicatorPercentage={50}
            strokeWidth={10}
            strokeColor="#f00"
            indicatorColor="#f00"
        />
      </div>
  );
}

export default App;

HorizontalProgressWithIndicator

import React from 'react';
import HorizontalProgressWithIndicator from 'react-progressbars-with-indicator';

function App() {
  return (
      <div>
        <HorizontalProgressWithIndicator
            percentage={80}
            indicatorPercentage={50}
            strokeWidth={10}
            strokeColor="#f00"
            indicatorColor="#f00"
        />
      </div>
  );
}

export default App;

Properties

SemiCircleProgressWithIndicator

Property	Type	Description
strokeWidth	number	The width of the progress bar line in pixels
strokeLinecap	"butt" | "round" | "square"	The type of end cap for the progress bar line ("butt", "round", or "square")
percentage	number	The percentage of the progress bar filled
indicatorPercentage	number	The position of the indicator along the progress bar (null value hides indicator)
percentageSeparator	string	The separator to use between the percentage and label text (default is "of")
strokeColor	string	The color of the progress bar line in hex
indicatorColor	string	The color of the indicator in hex
indicatorRelativeSize	number	The size of the indicator relative to the stroke width of the progress bar line
includeText	boolean	The text indicating percentage complete of the progress bar
fontStyle	{ fontSize: string, fontFamily: string, fontWeight: string, fill: string }	The style of the label text
hasBackground	boolean	The background of the progress bar
bgStrokeColor	string	The color of the progress bar background line in CSS

HorizontalProgressWithIndicator

Property	Type	Description
strokeWidth	number	The width of the progress bar line in pixels
strokeLinecap	"butt" | "round" | "square"	The type of end cap for the progress bar line ("butt", "round", or "square")
percentage	number	The percentage of the progress bar filled
indicatorPercentage	number	The position of the indicator along the progress bar (null value hides indicator)
strokeColor	string	The color of the progress bar line in hex
indicatorColor	string	The color of the indicator in hex
indicatorRelativeSize	number	The size of the indicator relative to the stroke width of the progress bar line
customText	string	Custom text that is displayed inside the progress bar
textPosition	'start' | 'end' | 'middle'	The position of the custom text inside the progress bar
fontStyle	{ fontFamily: string, fontWeight: string, fill: string }	The style of the label text
hasBackground	boolean	The background of the progress bar
bgStrokeColor	string	The color of the progress bar background line in CSS

Testing (development only)

This project has Storybook installed for testing purposes. To run the storybook, use the following command:

npm run storybook

Note that storybook only works in this repository - it is not available in the npm package.

License

MIT