react-js-progressbar v1.1.1

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'

• Progressbar shape style.
• Default Value full circle

size : Number | String

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

clockwise : Boolean

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

pathWidth : Number

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

pathColor : String | String[]

• 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'

• Progressbar filling path line cap shape.
• Default Value round

pathShadow : String

• 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

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

dashesSize : Number

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

dashesGap : Number

• The space between dashes.
• Default Value 2

trailWidth : Number

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

trailColor : String | String[]

• 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[]

• 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

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

textPosition : Object

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

textStyle : Object

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

animateText : Boolean

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

animation : Object

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