# react-progressbars-with-indicator > Progressbars with indicator for React Latest version **1.2.0** (published 2024-05-08) · MIT license · 0 weekly downloads ## Install ```sh npm install react-progressbars-with-indicator pnpm add react-progressbars-with-indicator yarn add react-progressbars-with-indicator bun add react-progressbars-with-indicator ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; has provenance. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2024-05-08 | | First published | 2024-04-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 143.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 0 | | Author | pwi-jeff | | Maintainers | jmiller-pwi | | Keywords | react, progressbar, semicircle, half progressbar, half circle, semi circle progressbar, indicator, horizontal progressbar | ## Links - npm: https://www.npmjs.com/package/react-progressbars-with-indicator - Repository: https://github.com/PWI-Works/react-progressbars-with-indicator - Issues: https://github.com/PWI-Works/react-progressbars-with-indicator/issues - npm.io page: https://npm.io/package/react-progressbars-with-indicator ## Dependencies (2) - [react](https://npm.io/package/react.md) ^18.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.2.0 (latest) — 2024-05-08 - 1.1.2 — 2024-05-06 - 1.1.1 — 2024-04-11 - 1.1.0 — 2024-04-11 - 1.0.5 — 2024-04-11 - 1.0.4 — 2024-04-11 - 1.0.3 — 2024-04-10 - 1.0.2 — 2024-04-10 - 1.0.1 — 2024-04-10 - 1.0.0 — 2024-04-10 ## README # react-progressbars-with-indicator A semicircle progress bar with an indicator for React applications. Originally forked from [react-semicircle-progressbar](https://github.com/4emcos/react-semicircle-progressbar) ![semicircle example](/assets/semicircle-example.png) ![horizontal example](/assets/horizontal-example.png) ## Installation Use the package manager [npm](https://www.npmjs.com/) to install react-progressbars-with-indicator. ```bash npm install react-progressbars-with-indicator ``` ## Usage ### Semicircle Progress Bar ```javascript import React from 'react'; import SemiCircleProgressWithIndicator from 'react-progressbars-with-indicator'; function App() { return (
); } export default App; ``` ### HorizontalProgressWithIndicator ```javascript import React from 'react'; import HorizontalProgressWithIndicator from 'react-progressbars-with-indicator'; function App() { return (
); } 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](https://storybook.js.org/) 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](https://choosealicense.com/licenses/mit/) --- _Source: https://npm.io/package/react-progressbars-with-indicator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._