Tuo-progress NPM

tuo-progress

progress with value (react)

circle-percent circle-state

bar-percent bar-state

npm install
yarn install

npm run dev
yarn dev

npm install tuo-progress
yarn add tuo-progress

// circle progress
<TuoCircleProgress progress={40} max={100}/>

// bar progess
<TuoBarProgress progress={40} max={100}/>

name	description	type	defalut
progress	value of progress	number
max	maximum of progress	number
className	additional css class of root dom node	string
circleSize	diameter of circle	number	100
strokeWidth	width of stroke	number	10
progressColor	color of progress stroke	stiring	#50586C
backgroundColor	color of max progress stroke	string	#DCE2F0
startDirection	direction where progress starts	'left' / 'top' / 'right' / 'bottom'	'top'
displayState	type of value shown	'percent' / 'state' / 'none'	'percent'
fontSize	font-size(px) of displayState	number	22
fontColor	color of displayState	string	'#777'
animation	animation enabled	boolean	true
animationSpeed	time(ms) to move by 1 of value	number	10
onAnimationState	value according to displayState	function(value)

name	description	type	defalut
progress	value of progress	number
max	maximum of progress	number
className	additional css class of root dom node	string
barWidth	width of bar	number / 'auto'	100
barHeight	height of bar	number	10
barRadius	border-radius of progress bar	number	10
progressColor	color of progress bar	stiring	#50586C
backgroundColor	color of max progress bar	string	#DCE2F0
displayState	type of value shown	'percent' / 'state' / 'none'	'percent'
fontSize	font-size(px) of displayState	number	12
fontColor	color of displayState	string	'#777'
animation	animation enabled	boolean	true
animationSpeed	time(ms) to move by 1 of value	number	10
onAnimationState	value according to displayState	function(value)