content logo

React Progress Bars:

Stepwise Progress Bar using React

Using progress bars on your website makes numbers more readable for your viewers. In this post, we will represent the Stepwise Progress Bar using React. This React Progress Bar has many benefits for your page and with the help of this amazing bootstrap, users can read numbers of your page easily. So, more users may be attracted to websites with these kinds of bars. If you have a web page and would like to increase the number of your users, this JavaScript Progress Bar can help you to achieve this purpose.

A preview of this post is located below with a colorful theme. The title of this post is black and larger than other texts. You can see a field down below and a red button for the “Next Step” option. Plus, there is a “Reset” option at the bottom of this red field. As you click on the red button, a blue line moves into the upper field. With each click on this Step by Step Progress Bar With Button, blue lines move forward. If you want to clear all blue lines, you only need to click on the “Reset” option of this Simple Progress Bar Code.

 

#

React Progress Bar

#

Javascript Progress Bar

#

Step by Step Progress Bar with Button

#

Simple Progress Bar Code

<!-- This script got from frontendfreecode.com -->
<div id="app"></div>
<div id="vids"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
@import url('https://fonts.googleapis.com/css?family=Montserrat');
html, body {
	font-family: 'Montserrat', sans-serif;
}
.progress-bar {
	position: relative;
	height: 20px;
	width: 350px;
	border-radius: 50px;
	border: 1px solid #333;
}
.filler {
	background: #1DA598;
	height: 100%;
	border-radius: inherit;
	transition: width .2s ease-in;
}
button {
	margin-right: 10px;
	padding: 7px 12px;
	font-size: 14px;
	background: #d14836;
	color: white;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	outline: 0;
}
#vids {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#vids a:first-of-type {
	margin-bottom: 5px;
}
class ProgressBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            percentage: 0
        };
        this.nextStep = this.nextStep.bind(this);
    }
    nextStep() {
        if (this.state.percentage === 100) return;
        this.setState(prevState => ({ percentage: prevState.percentage + 20 }));
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement("h2", null, " A React Progress Bar "), /*#__PURE__*/
                React.createElement(ProgressBar, { percentage: this.state.percentage }), /*#__PURE__*/
                React.createElement("div", { style: { marginTop: '20px' } }, /*#__PURE__*/
                    React.createElement("button", {
                        onClick: this.nextStep
                    }, "Next Step")), /*#__PURE__*/
                React.createElement("div", { style: { marginTop: '10px', color: 'blue', marginBottom: '15px' }, onClick: () => this.setState({ percentage: 0 }) }, "Reset")));
    }
}
const ProgressBar = props => {
    return /*#__PURE__*/(
        React.createElement("div", { className: "progress-bar" }, /*#__PURE__*/
            React.createElement(Filler, { percentage: props.percentage })));
};
const Filler = props => {
    return /*#__PURE__*/React.createElement("div", { className: "filler", style: { width: `${props.percentage}%` } });
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(ProgressBarExample, null),
    document.querySelector('#app'));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
html, body {
	font-family: 'Montserrat', sans-serif;
}
.progress-bar {
	position: relative;
	height: 20px;
	width: 350px;
	border-radius: 50px;
	border: 1px solid #333;
}
.filler {
	background: #1DA598;
	height: 100%;
	border-radius: inherit;
	transition: width .2s ease-in;
}
button {
	margin-right: 10px;
	padding: 7px 12px;
	font-size: 14px;
	background: #d14836;
	color: white;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	outline: 0;
}
#vids {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#vids a:first-of-type {
	margin-bottom: 5px;
}
</style>

</head>
<body>
<div id="app"></div>
<div id="vids"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class ProgressBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            percentage: 0
        };
        this.nextStep = this.nextStep.bind(this);
    }
    nextStep() {
        if (this.state.percentage === 100) return;
        this.setState(prevState => ({ percentage: prevState.percentage + 20 }));
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement("h2", null, " A React Progress Bar "), /*#__PURE__*/
                React.createElement(ProgressBar, { percentage: this.state.percentage }), /*#__PURE__*/
                React.createElement("div", { style: { marginTop: '20px' } }, /*#__PURE__*/
                    React.createElement("button", {
                        onClick: this.nextStep
                    }, "Next Step")), /*#__PURE__*/
                React.createElement("div", { style: { marginTop: '10px', color: 'blue', marginBottom: '15px' }, onClick: () => this.setState({ percentage: 0 }) }, "Reset")));
    }
}
const ProgressBar = props => {
    return /*#__PURE__*/(
        React.createElement("div", { className: "progress-bar" }, /*#__PURE__*/
            React.createElement(Filler, { percentage: props.percentage })));
};
const Filler = props => {
    return /*#__PURE__*/React.createElement("div", { className: "filler", style: { width: `${props.percentage}%` } });
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(ProgressBarExample, null),
    document.querySelector('#app'));
</script>

</body>
</html>
Preview