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

//...
import Progressbar from 'react-js-progressbar';

export default function App() {
  const [percentage, setPercentage] = useState(0);

  const change_progressbar_input = () => {
    setPercentage(50);
  };

  return (
    <>
      <div id='progressbarContainer'>
        <Progressbar
          input={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 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' |