react-js-progressbar

!npm
!npm bundle size
!NPM

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


Installation

npm install react-js-progressbar

Usage

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

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

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

return (
<>

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)

);
}
`

Props

$3

- Progressbar percentage a value between 0 and 100.

$3

- Progressbar shape style.
- Default Value full circle

$3

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

$3

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

$3

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

$3

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

$3

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

$3

- 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

$3

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

$3

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

$3

- The space between dashes.
- Default Value 2

$3

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

$3

- 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

$3

- 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

$3

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

$3

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

$3

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

$3

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

$3

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