CODEWITHSUNDEEP
javascriptreactjs
M.El Yaakoubi
M.El Yaakoubi

Reputation: 181

How can i add this progress bar js in my react app (beginner)

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 ?

Upvotes: 1

Views: 842

Answers (3)

mika.koshonson
mika.koshonson

Reputation: 107

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.

Upvotes: 0

Tepsa
Tepsa

Reputation: 54

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>
    )
}`

Upvotes: 0

egremont of yorke
egremont of yorke

Reputation: 1143

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.

Upvotes: 2

Related Questions