@dead_fish/react-progress

Demo

Go Try

Usage

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 (
		<>
			<Progress value={value} size={400} strokeWidth={30} gap={0} duration={1000} >

				<span>Hello World</span>

			</Progress>
		</>
	)
}

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