Progress Bar using Reactjs

by vsasikalabe Updated: Jan 24, 2023

In this kit, we're going to see how to create Progress Bar using Reactjs with simple steps.A progress bar shows the measure of progress of any task or activity.As your project rolls along, Progress is the best way to communicate how much work has been completed on a task. When the Progress percentage is updated on a task, TeamGantt automatically updates the percentage of completion for the task group and the overall project in real time.

Please check the code below,

Preview of the output that you will get on running this code from your IDE

Code

In this solution we use the React library.

React progress bar with each click

JavaScriptLines of Code : 51License : CC BY-SA 4.0

class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      score: 0
    };    
  }

  render() {
    const style = {
      width: this.state.width + '%'
    };
  
    return (
      <div className="wrapper" onClick={(e) => { this.handleClick(e); }}>
        {'Score: ' + this.state.score} <br />
        {this.state.width + '%'}
        <div className="bar" style={style} />
      </div>
    );
  }
  
  handleClick(e) {
    this.setState(state => {
      if (state.width + 10 === 100) {
        return { width: 0, score: state.score + 1 };
      }
      return { width: state.width + 10 };
    });
  }
}

ReactDOM.render(<ProgressBar />, document.getElementById('root'));
.wrapper {
  width: 100%;
  height: 300px;
  background: #eee;
  cursor: pointer;
}

.bar {
  width: 0;
  height: 20px;
  transition: width 0.3s;
  background: #ec6161;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

<div id="root" />

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Open the folder in IDE.
Copy the code using "copy" button above and paste it in App.js file and also paste style code in App.css,html code into index.html file within the body tag.(remove the earlier code from App.js and App.css.).
Import React component and React DOM,
Add export default progressBar to the end.
Open the terminal from IDE.
npm start to run the file.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for 'Progress Bar using Reactjs' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in VS Code 1.73.1 version.
The solution is tested on Nodejs 16.14.2 version.
react 18.2.0 version.

Using this solution, we are able to create Progress Bar using Reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to create Progress Bar using Reactjs.