react-progressbars-with-indicator

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

!semicircle example

!horizontal example

Installation

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

``bash
npm install react-progressbars-with-indicator
`

Usage

$3

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

function App() {
return (


export default App;
`

$3

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

function App() {
return (


export default App;
`

Properties

$3

| 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 |

$3

| 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:

`bash
npm run storybook
``

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

License

MIT