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
and100
.
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 whendashed
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' |