I am trying to figure out a way to make the loader for React Circular Progressbar load only once without repeating the sequence.
After reviewing all the documentation, I could not find any information on how to achieve this. Additionally, other components that create animations did not provide a solution to prevent sequence repetition.
You can view an example of the progress bar by clicking here: enter link description here
Below is the code snippet in app.js:
<ChangingProgressProvider values={[0, percentage]}>
{percentage => (
<CircularProgressbar
value={percentage}
text={`${percentage}%`}
styles={buildStyles({
pathTransition:
percentage === 0 ? "none" : "stroke-dashoffset 0.5s ease 0s"
})}
/>
)}
</ChangingProgressProvider>and the code for the component CircularProgressbar:
class ChangingProgressProvider extends React.Component {
static defaultProps = {
interval: 1000
};
state = {
valuesIndex: 0
};
componentDidMount() {
setInterval(() => {
this.setState({
valuesIndex: (this.state.valuesIndex + 1) % this.props.values.length
});
}, this.props.interval);
}
render() {
return this.props.children(this.props.values[this.state.valuesIndex]);
}
}
export default ChangingProgressProvider;