React Progress PK
npm install @dead_fish/react-progressjs
import { useState, useEffect } from 'react'import Progress from '@dead_fish/react-progress'
import '@dead_fish/react-progress/dist/lib/Progress.css'
export default function App() {
const [value, setValue] = useState(0)
useEffect(() =>{
// fetch data from remote
setTimeout(() => {
setValue(70)
}, 2000)
}, [])
return (
<>
Hello World
>
)
}
``| Property Name | Data Type | Default Value | Required | Description |
| ------------- | --------- | ---------------------- | -------- | -------------------------------------------------------------------------------------------------- |
| size | number | 400 | No | Size of the progress bar |
| gap | number | 18 | No | Angle gap between the progress bars |
| gapAngle | number | 90 | No | Angle size left empty at the bottom of the progress bar |
| bgColor | string[] | ['#B3B3B3', '#ffffff'] | No | Background colors of the progress bar, first value for start color, second value for rebound color |
| strokeColor | string[] | ['#4CC28D', '#1D68EA'] | No | Colors for the left and right sides of the progress bar |
| value | number | 0 | No | Proportion occupied by the progress bar, range from 0-100 |
| strokeWidth | number | 30 | No | Width of the progress bar, unit in px |
| fill | string | 'none' | No | Overall fill color |
| duration | number | 1000 | No | Duration of the progress bar animation, unit in ms |
| children | ReactNode | - | No | Text in the middle of the progress bar |