React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG.
npm install react-js-progressbarnpm install react-js-progressbar
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' |