react-js-progressbar

• React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG.

Installation

npm install react-js-progressbar

Usage

//...importProgressbarfrom'react-js-progressbar';exportdefaultfunctionApp(){const[percentage,setPercentage]=useState(0);constchange_progressbar_input=()=>{setPercentage(50);};return(<><divid='progressbarContainer'><Progressbarinput={percentage}pathWidth={10}pathColor={['#56ab2f','#a8e063']}// use an array for gradient color.trailWidth={20}trailColor='#363636'// use a string for solid color.textStyle={{fill: 'red'}}// middle text style>
// children goes here, an image for example. (optional)
</Progressbar></div></>);}

Props

input : [Number]

• Progressbar percentage a value between 0 and 100.

shape : [ 'semi circle' | 'full circle' | 'arc' ] [optional]

• Progressbar shape style.
• Default Valuefull circle

size : [ Number | String ] [optional]

• Progressbar size (width * height).
• Default Value100%

clockwise : [Boolean] [optional]

• Whether to rotate progressbar in clockwise direction.
• Default Valuetrue

pathWidth : [Number] [optional]

• Progressbar filling path width (stroke width).
• Default Value12

pathColor : [ String | String[] ] [optional]

• Progressbar filling path color (stroke color).
• Accepts one string for a solid color or array of two strings for gradient color.
• Default Value['#f4314a', '#fa5813']

pathLinecap : [ 'butt' | 'round' | 'square' | 'none' ] [optional]

• Progressbar filling path line cap shape.
• Default Valueround

pathShadow : [String] [optional]

• Progressbar filling path drop shadow.
• Syntax"offset-x offset-y blur-radius color"
• Doesn't works for 'arc' shape and when dashed is enabled.
• Use 'none' to remove the shadow.
• Default Value0px 0px 2px #00000080

dashed : [Boolean] [optional]

• Enable progressbar filling path dashed style (mask).
• Default Valuefalse

dashesSize : [Number] [optional]

• Progressbar filling path dashes size and length.
• Default Value15

dashesGap : [Number] [optional]

• The space between dashes.
• Default Value2

trailWidth : [Number] [optional]

• Progressbar path trail width (stroke width).
• Default Value5

trailColor : [ String | String[] ] [optional]

• Progressbar path trail color (stroke color).
• Accepts one string for a solid color or array of two strings for gradient color.
• Use 'none' to remove the trail.
• Default Valuelightgray

backgroundColor : [ String | String[] ] [optional]

• Progressbar circle background color.
• Accepts one string for a solid color or array of two strings for gradient color.
• Use 'none' to remove the background.
• Default Valuenone

customText : [String] [optional]

• Progressbar middle custom text.
• Use "" (empty string) to remove the text.
• Default Valueinput + '%'

textPosition : [Object] [optional]

• Align progressbar text on the x , y axis.
• Default Value{x: '50%', y: '50%}

Option	Description	Default Value
x	Align progressbar text on the x axis.	'50%'
y	Align progressbar text on the y axis.	'50%'

textStyle : [Object] [optional]

• Progressbar middle text css inline style.
• Note: use fill for text color.
• Default Values{ fontSize: '40px', fill: 'black' }

animateText : [Boolean] [optional]

• Animate progressbar middle text from 0 to input value.
• Doesn't work if customText value is given.
• Default Valuetrue

animation : [Object] [optional]

• Progressbar animation options.
• Default Values{ duration: 500, delay: 0, ease: 'easeOutBack', animateOnMount: true, animateOnInputChange: true }

Option	Type	Description	Default Value
animateOnMount	Boolean	Animate on first render.	true
animateOnInputChange	Boolean	Animate every time input value changes.	true
duration	Number	Progressbar animation duration in ms.	500
delay	Number	Progressbar animation delay in ms.	0
ease	String | Function	Check easings.net to learn more.	'easeOutBack'