content logo

React Progress Bars:

React Linear Progress Bar with a Range Slider

If you show your progress to your customers and visitors, they will engage to stay on your website. This post is going to introduce an essential bootstrap for this purpose that is called the React Linear Progress Bar with a Range Slider. This amazing Linear Progress Bar Code allows your users to see your progress and improvement by percentage. So, if you would like to have a progress bar on your page to differentiate it from others, this post with the React Progress Bar can be helpful.

You can find out the beauty of this super Responsive Progress Code Bar from its preview. The black background of this fantastic code has a beautiful harmony with the white and bold text. Therefore, you can apply it to your website if it has a dark theme. At the bottom of the title, there is a thick line with gray color and you can see the percentage icon on the right side of it. We have located a thin line under this part with a small blue circle. As you move this circle to the right, it turns blue and the upper part shows more percentage. Download and use this functional Progress Bar and Range Slider.

#

Linear Progress Bar Code

#

React Progress Bar

#

Responsive Progress CodeBar

#

Progress Bar and Range Slider

<!-- This script got from frontendfreecode.com -->
<main>
  <div id="app"></div>
</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.input-range {
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
.input-range__slider {
	width: 100%;
}
.progress, .progress__bar {
	min-height: 1.25rem;
}
.progress__value {
	position: absolute;
	top: 0.0625rem;
	right: 0.25rem;
}
.progress {
	background-color: #545454;
	position: relative;
}
.progress__bar {
	background-color: #43b7e1;
}
*, *:before, *:after {
	box-sizing: border-box;
}
body {
	background-color: #222;
	color: white;
	font: 1rem/1 "Open Sans", sans-serif;
	text-shadow: 0 1px 1px #000;
}
main {
	margin: 0 auto;
	width: 80%;
}
var InputRange = React.createClass({
    displayName: "InputRange",
    onChangeListener: function (event) {
        var el = this.refs.inputRangeRef.getDOMNode();
        jQuery("body").trigger("inputRange.changed", {
            value: el.value
        });
    },
    render: function () {
        return /*#__PURE__*/(
            React.createElement("div", { className: "input-range" }, /*#__PURE__*/
                React.createElement("input", { type: "range", ref: "inputRangeRef", onChange: this.onChangeListener, className: "input-range__slider", min: "0", max: "100", step: ".1", defaultValue: "0" })));
    }
});
var ProgressBar = React.createClass({
    displayName: "ProgressBar",
    getInitialState: function () {
        return {
            value: "0%"
        };
    },
    onInputRangeChanged: function (event, data) {
        this.setState({
            value: data.value + "%"
        });
    },
    componentDidMount: function () {
        jQuery("body").on("inputRange.changed", this.onInputRangeChanged);
    },
    render: function () {
        var style = {
            width: this.state.value
        };
        return /*#__PURE__*/(
            React.createElement("div", { className: "progress" }, /*#__PURE__*/
                React.createElement("div", { className: "progress__bar", style: style }), /*#__PURE__*/
                React.createElement("span", { className: "progress__value" }, this.state.value)));
    }
});
var Title = React.createClass({
    displayName: "Title",
    render: function () {
        return /*#__PURE__*/(
            React.createElement("h1", null, this.props.value));
    }
});
React.render( /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
        React.createElement(Title, { value: "ReactJS progress bar example" }), /*#__PURE__*/
        React.createElement(ProgressBar, null), /*#__PURE__*/
        React.createElement(InputRange, null)),
    document.getElementById("app"));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.input-range {
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
.input-range__slider {
	width: 100%;
}
.progress, .progress__bar {
	min-height: 1.25rem;
}
.progress__value {
	position: absolute;
	top: 0.0625rem;
	right: 0.25rem;
}
.progress {
	background-color: #545454;
	position: relative;
}
.progress__bar {
	background-color: #43b7e1;
}
*, *:before, *:after {
	box-sizing: border-box;
}
body {
	background-color: #222;
	color: white;
	font: 1rem/1 "Open Sans", sans-serif;
	text-shadow: 0 1px 1px #000;
}
main {
	margin: 0 auto;
	width: 80%;
}
</style>

</head>
<body>
<main>
  <div id="app"></div>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var InputRange = React.createClass({
    displayName: "InputRange",
    onChangeListener: function (event) {
        var el = this.refs.inputRangeRef.getDOMNode();
        jQuery("body").trigger("inputRange.changed", {
            value: el.value
        });
    },
    render: function () {
        return /*#__PURE__*/(
            React.createElement("div", { className: "input-range" }, /*#__PURE__*/
                React.createElement("input", { type: "range", ref: "inputRangeRef", onChange: this.onChangeListener, className: "input-range__slider", min: "0", max: "100", step: ".1", defaultValue: "0" })));
    }
});
var ProgressBar = React.createClass({
    displayName: "ProgressBar",
    getInitialState: function () {
        return {
            value: "0%"
        };
    },
    onInputRangeChanged: function (event, data) {
        this.setState({
            value: data.value + "%"
        });
    },
    componentDidMount: function () {
        jQuery("body").on("inputRange.changed", this.onInputRangeChanged);
    },
    render: function () {
        var style = {
            width: this.state.value
        };
        return /*#__PURE__*/(
            React.createElement("div", { className: "progress" }, /*#__PURE__*/
                React.createElement("div", { className: "progress__bar", style: style }), /*#__PURE__*/
                React.createElement("span", { className: "progress__value" }, this.state.value)));
    }
});
var Title = React.createClass({
    displayName: "Title",
    render: function () {
        return /*#__PURE__*/(
            React.createElement("h1", null, this.props.value));
    }
});
React.render( /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
        React.createElement(Title, { value: "ReactJS progress bar example" }), /*#__PURE__*/
        React.createElement(ProgressBar, null), /*#__PURE__*/
        React.createElement(InputRange, null)),
    document.getElementById("app"));
</script>

</body>
</html>
Preview