content logo

React Progress Bars:

React Gradient Progress Bar with Plus Button

Using different kinds of progress bars helps you change your website's appearance as soon as possible. The React Gradient Progress Bar with Plus Button is presented with a beautiful design. This kind of Gradient Progress Bar allows you to represent your progression to your audience. This progress bar is used not only to show the progression of your website but also for other purposes. If you want to use this Colorful React Progress Bar on your website to gain more viewers, download and apply it free.

Please pay attention to the following preview that we have located down below. As you can see in the following preview, this JavaScript Progress Bar is simple and fits with various websites. It has a white background, and you can see a field in the middle of the page with a white theme. This field has a gray border, and you can see several colors in this field. On the right side of the field, there is a circle containing a "+" icon in black color. When you press the plus icon, the color of the field moves forward, and its percentage increases. You can download and use this Incremental Progress Bar Code on your website.

#

Gradient Progress Bar

#

Colorful React Progress Bar

#

Javascript Progress Bar

#

Incremental Progress Bar Code

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
#app {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shell {
  float: left;
  height: 20px;
  width: 250px;
  border: 1px solid #aaa;
  border-radius: 13px;
  padding: 3px;
}
.bar {
  background: linear-gradient(to right, #9658b5, #e3505a);
  height: 20px;
  width: 15px;
  border-radius: 9px;
}
.bar span {
  float: right;
  padding: 4px;
  color: #fff;
  font-size: 0.7em;
}
button {
  margin: 10px;
  border: 1px solid #aaa;
  background: none;
  border-radius: 50%;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
}
class ProgressBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            progress: 25
        };
    }
    clickHandler() {
        this.setState({
            progress: this.state.progress < 100 ? this.state.progress + 5 : 100
        });
    }
    render() {
        var progress = {
            width: this.state.progress + "%"
        };
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement("div", { className: "shell" }, /*#__PURE__*/
                    React.createElement("div", { className: "bar", style: progress }, /*#__PURE__*/React.createElement("span", null, this.state.progress + "%"))), /*#__PURE__*/
                React.createElement("button", { onClick: this.clickHandler.bind(this) }, "+")));
    }
}
const mountNode = document.getElementById("app");
React.render( /*#__PURE__*/React.createElement(ProgressBar, null), mountNode);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<style>
#app {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shell {
  float: left;
  height: 20px;
  width: 250px;
  border: 1px solid #aaa;
  border-radius: 13px;
  padding: 3px;
}
.bar {
  background: linear-gradient(to right, #9658b5, #e3505a);
  height: 20px;
  width: 15px;
  border-radius: 9px;
}
.bar span {
  float: right;
  padding: 4px;
  color: #fff;
  font-size: 0.7em;
}
button {
  margin: 10px;
  border: 1px solid #aaa;
  background: none;
  border-radius: 50%;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class ProgressBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            progress: 25
        };
    }
    clickHandler() {
        this.setState({
            progress: this.state.progress < 100 ? this.state.progress + 5 : 100
        });
    }
    render() {
        var progress = {
            width: this.state.progress + "%"
        };
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement("div", { className: "shell" }, /*#__PURE__*/
                    React.createElement("div", { className: "bar", style: progress }, /*#__PURE__*/React.createElement("span", null, this.state.progress + "%"))), /*#__PURE__*/
                React.createElement("button", { onClick: this.clickHandler.bind(this) }, "+")));
    }
}
const mountNode = document.getElementById("app");
React.render( /*#__PURE__*/React.createElement(ProgressBar, null), mountNode);
</script>

</body>
</html>
Preview