web-progess-bar
v1.0.1
Published
A customizable progress bar component for React
Maintainers
Readme
📊 ProgressBar Component
A simple and customizable progress bar component for React.
🚀 Installationa
Install the package using npm or yarn:
npm install web-progress-bar
# OR
yarn add web-progress-bar
## 📌 Usage
Import the progessbar into your React component and customize them using `size` and `color` props.
```tsx
import React from "react";
import ProgressBar from "web-progress-bar";
function App() {
return (
<div>
<h2>Progress Bar Example</h2>
<ProgressBar
progress={10}
color="red"
height="20px"
borderRadius="5px"
duration="1s"
timingFunction="ease-in-out"
delay="0s"
backgroundColor="yellow"
/>
</div>
);
}
export default App;
```
## 📜 Available Item
The package includes the following item:
- `ProgressBar`
Each item supports:
- `progress` (default: ``)
- `color` (default: `blue`)
- `height` (default: `20`)
- `borderRadius` (default: `5px`)
- `backgroundColor` (default: `#eee`)
- `duration` (default: `0.3s`)
- `timingFunction` (default: `ease-in-out`)
- `delay` (default: `0s`)
## 📄 License
This project is licensed under the MFR License.