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