https://github.com/katerinalupacheva/react-progress-bar
Simple React progress bar component
https://github.com/katerinalupacheva/react-progress-bar
custom-component progress-bar react typescript
Last synced: 11 months ago
JSON representation
Simple React progress bar component
- Host: GitHub
- URL: https://github.com/katerinalupacheva/react-progress-bar
- Owner: KaterinaLupacheva
- License: mit
- Created: 2020-04-09T09:18:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-05-07T19:07:46.000Z (about 1 year ago)
- Last Synced: 2025-07-10T20:15:45.084Z (12 months ago)
- Topics: custom-component, progress-bar, react, typescript
- Language: JavaScript
- Homepage: https://katerinalupacheva.github.io/react-progress-bar/
- Size: 6.86 MB
- Stars: 117
- Watchers: 2
- Forks: 21
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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)