Hello there i want to add the progress bar js in my react application but I don't know how to do it , iam a beginner can someone please provide some help ? the progressbarjs : is from https://kimmobrunfeldt.github.io/progressbar.js/ so basically i must add this js code somewhere in my react :
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
}
});
bar.animate(1.0);
how to manage it please ?
The same creator of ProgressBar.js has an npm library (called react-progress-bar) that may be more suited for your use in React without too much fiddling about.
The documentation seems comprehensive enough, but I'm indexing for the fact that you say you're a beginner, so here's an example of what a <ProgressBar /> component can look like with this library:
var App = React.createClass({
render: function render() {
var options = {
strokeWidth: 2
};
// For demo purposes so the container has some dimensions.
// Otherwise progress bar won't be shown
var containerStyle = {
width: '200px',
height: '200px'
};
return (
<Circle
progress={this.state.progress}
text={'test'}
options={options}
initialAnimate={true}
containerStyle={containerStyle}
containerClassName={'.progressbar'} />
);
}
});
There are many ways you may use the progress bar, but one common pattern is to use it as a loader, while waiting for data (example, from an axios call to a server/API).
That pattern usually looks like this:
... //your React code
return (
<div>
{dataIsFetched? <span>{data.content}</span> : <ProgressBar />}
</div>
)
Check out the npm library for how to use it.
Here a example for a circle progress bar
`
import { Circle } from 'progressbar.js'
import { useEffect } from 'react'
export default function CircleProgress () {
useEffect(() => {
var bar = new Circle('#container', {easing: 'easeInOut'});
bar.animate(1);
}, [])
return (
<div id="container"></div>
)
}`
It most probably wouldn't work as React doesn't know what ProgressBar is unless you include it in the project. It seems that its API is rather 'low-level' so why don't you look for some React made progress bars out there? Maybe it'll suit your needs better.
You can check out for example MUI, Bootstrap or some of the other options out there.