react-progressbar-cs
Version:
An Progressbar components.
55 lines (39 loc) • 1.43 kB
Markdown
## Getting started
### Compatibility
Your project needs to use React 16.8 or later.
### Installation
Add react-progressbar to your project by executing npm install react-progressbar-cs or yarn add react-progressbar-cs.
### Usage
Here's an example of basic usage:
```tsx
import { useState, useEffect } from 'react';
import Progressbar from 'react-progressbar-cs';
import "react-progressbar-cs/dist/progressbar.css";
function MyApp() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(timer);
return 100;
}
const randomIncrement = Math.floor(Math.random() * 5) + 1;
return Math.min(prevProgress + randomIncrement, 100);
});
}, 1000);
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h2>Linear Progress</h2>
<div style={{ justifyContent: "center", display: "flex" }}>
<Progressbar progress={progress} type="linear" width="300px" height="25px" textSize={16} />
</div>
<h2 style={{ marginTop: "50px" }}>Circular Progress</h2>
<Progressbar progress={progress} type="circle" circleSize={150} strokeWidth={10} textSize={20} />
</div>
);
}
```
## License
The MIT License.
## Thank you