# @ramonak/react-progress-bar
> > Progress Bar React Component
Latest version **5.4.0** (published 2025-05-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install @ramonak/react-progress-bar
pnpm add @ramonak/react-progress-bar
yarn add @ramonak/react-progress-bar
bun add @ramonak/react-progress-bar
```
## Health
**Score 30/100 (F)** — status: maintenance-mode.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 5.4.0 |
| Published | 2025-05-07 |
| First published | 2020-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 115 |
| Author | KaterinaLupacheva |
| Maintainers | ramonak |
| Keywords | react, react-component, progress bar, progress-bar |
## Links
- npm: https://www.npmjs.com/package/@ramonak/react-progress-bar
- Repository: https://github.com/KaterinaLupacheva/react-progress-bar
- Homepage: https://katerinalupacheva.github.io/react-progress-bar/
- Issues: https://github.com/KaterinaLupacheva/react-progress-bar/issues
- npm.io page: https://npm.io/package/@ramonak/react-progress-bar
## 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
- 5.4.0 (latest) — 2025-05-07
- 5.3.0 — 2024-09-15
- 5.2.0 — 2023-12-28
- 5.1.1 — 2023-11-20
- 5.1.0 — 2023-11-20
- 5.0.3 — 2022-10-16
- 5.0.2 — 2022-07-29
- 5.0.1 — 2022-07-02
- 5.0.0 — 2022-06-05
- 4.4.0 — 2022-02-07
- 4.3.0 — 2022-02-07
- 4.2.0 — 2021-11-21
- 4.1.0 — 2021-11-14
- 4.0.0 — 2021-10-17
- 3.3.1 — 2021-10-17
- … 30 more at https://npm.io/package/@ramonak/react-progress-bar/versions
## README
# @ramonak/react-progress-bar
> Progress Bar React Component
[](https://www.npmjs.com/package/@ramonak/react-progress-bar) 
---
---
[Playground / Code Generator](https://katerinalupacheva.github.io/react-progress-bar/)
---
## Install
```bash
npm install --save @ramonak/react-progress-bar
```
## Usage
```jsx
import React from "react";
import ProgressBar from "@ramonak/react-progress-bar";
const Example = () => {
return ;
};
```
## Examples
### Label without "%" at the end
```jsx
```
### Max completed value is greater than 100
```jsx
```
### Custom Label
```jsx
```
### Custom class names
```css
//styles.scss
.wrapper {
border: 3px solid blue;
}
.container {
background-color: pink;
}
.barCompleted {
background-color: lightblue;
width: 80%;
}
.label {
font-size: 20px;
color: green;
}
```
```jsx
import './styles.scss'
...
```
## Props
| Name | Type | Default | Description |
| -------------------------- | -------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `completed` (required) | `Number or string` | | Percentage of completed progress bar value.
If a string, the "%" won't be added to the label. See [Examples](#examples) |
| `maxCompleted` | `number` | `100` | Max possible value of the `completed` prop |
| `customLabel` | `string` | undefined | Custom label |
| `bgColor` | `string` | `#6a1b9a` | Color of the completed bar |
| `height` | `string` | `20px` | Height of the bar |
| `width` | `string` | `100%` | Width of the bar |
| `margin` | `string` | | Margin |
| `padding` | `string` | | Padding |
| `borderRadius` | `string` | `50px` | Border radius of the bar |
| `baseBgColor` | `string` | `#e0e0de` | Color of the "non-completed" bar |
| `labelAlignment` | `string:`
`left, center, right, outside` | `right` | Position of the label inside the completed bar or outside bar |
| `labelColor` | `string` | `#fff` | Color of the label text |
| `labelSize` | `string` | `15px` | Font-size of the label text |
| `isLabelVisible` | `boolean` | `true` | Visibility of the label |
| `transitionDuration` | `string` | `1s` | Duration of the width transition |
| `transitionTimingFunction` | `string:`
`ease, linear, ease-in, ease-out, ease-in-out` | `ease-in-out` | Timing function of the width transition |
| `animateOnRender` | `boolean` | false | Should the bar width be animated on the first render |
| `initCompletedOnAnimation` | `string or number` | 0 | Initial completed value (e.g. the width of the completed bar) on animation start (applies only when `animateOnRender` is true) |
| `className` | `string` | | Add a `className` to the parent `div` (see [example](#custom-class-names)) |
| `barContainerClassName` | `string` | | Add a `className` to the container `div` (see [example](#custom-class-names)) |
| `completedClassName` | `string` | | Add a `className` to the completed part of the bar (see [example](#custom-class-names)) |
| `labelClassName` | `string` | | Add a `className` to the bar label (see [example](#custom-class-names)) |
| `dir` | `string:`
`ltr, rtl, auto` | `ltr` | Progressbar HTML direction |
| `ariaValuemin` | `number` | `0` | accessibility: Defines the minimum allowed value for a range |
| `ariaValuemax` | `number` | `100` | accessibility: Defines the maximum allowed value for a range |
| `ariaValuetext` | `number` | `null` | accessibility: Defines the human readable text alternative of aria-valuenow (defaults to completed if not passed) |
| `customLabelStyles` | CSS.Properties | | custom CSS properties for a label |
| `isIndeterminate` | boolean | `false` | indeterminate progress bar |
## License
MIT © [KaterinaLupacheva](https://github.com/KaterinaLupacheva)
---
_Source: https://npm.io/package/@ramonak/react-progress-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._