@dead_fish/react-progress

Demo

$3

Usage

js
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 |

Usage

js
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

)
}