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

1//...
2import Progressbar from 'react-js-progressbar';
3
4export default function App() {
5  const [percentage, setPercentage] = useState(0);
6
7  const change_progressbar_input = () => {
8    setPercentage(50);
9  };
10
11  return (
12    <>
13      <div id='progressbarContainer'>
14        <Progressbar
15          input={percentage}
16          pathWidth={10}
17          pathColor={['#56ab2f', '#a8e063']} // use an array for gradient color.
18          trailWidth={20}
19          trailColor='#363636' // use a string for solid color.
20          textStyle={{ fill: 'red' }} // middle text style
21        >
22          // children goes here, an image for example. (optional)
23        </Progressbar>
24      </div>
25    </>
26  );
27}

Props

input : [Number]

• Progressbar percentage a value between 0 and 100.

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

• Progressbar shape style.
• Default Value full circle

size : [ Number | String ] [optional]

• Progressbar size (width * height).
• Default Value 100%

clockwise : [Boolean] [optional]

• Whether to rotate progressbar in clockwise direction.
• Default Value true

pathWidth : [Number] [optional]

• Progressbar filling path width (stroke width).
• Default Value 12

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 Value round

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 Value 0px 0px 2px #00000080

dashed : [Boolean] [optional]

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

dashesSize : [Number] [optional]

• Progressbar filling path dashes size and length.
• Default Value 15

dashesGap : [Number] [optional]

• The space between dashes.
• Default Value 2

trailWidth : [Number] [optional]

• Progressbar path trail width (stroke width).
• Default Value 5

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 Value lightgray

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 Value none

customText : [String] [optional]

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

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 Value true

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'