content logo

React Progress Bars:

Multiple React Progress Bar with Rounded Border and Label

One of the most important parts of any website is its storage space. This code is the Multiple React Progress Bar with Rounded Border and Label that shows the occupy capacity in your website. Using this Multi Progress Bar can help you represent your progression or even the amount of occupancy of each item on your website. So, you can download and apply this code to your website to gain more audiences and engage your older viewers. It is worth mentioning that the following Progress Flow Code has a simple design, and it can be used on various websites. So, you have no limitations while utilizing this beautiful code.

By looking at the following preview, you understand that the following React Progress Bar has a white background with black text. There is a field in the middle of the page with different colors. Each color represents a specific item with its own percentage. The percentage of each item is located above the field with its own color. Plus, the name of each item is written below the field, and a colorful circle elaborates this field more. So, download and apply this CSS Rounded Progress Bar on your website.

#

Multi Progress Bar

#

React Progress Bar

#

Progress Flow Code

#

CSS Rounded Progress Bar

<!-- This script got from frontendfreecode.com -->
<div id="root">
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.multicolor-bar {
	margin: 20px 20%;
}
.multicolor-bar .values .value {
	float: left;
	text-align: center;
}
.multicolor-bar .scale .graduation {
	float: left;
	text-align: center;
}
.multicolor-bar .bars .bar {
	float: left;
	height: 10px;
}
.multicolor-bar .bars div.bar:first-of-type {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.multicolor-bar .bars div.bar:last-of-type {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.multicolor-bar .legends {
	text-align: center;
}
.multicolor-bar .legends .legend {
	display: inline-block;
	margin: 0 5px;
	text-align: center;
}
.multicolor-bar .legends .legend .dot {
	font-size: 25px;
	vertical-align: middle;
}
.multicolor-bar .legends .legend .label {
	margin-left: 2px;
	vertical-align: middle;
}
class MultiColorProgressBar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const parent = this.props;
    let values = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "value", style: { 'color': item.color, 'width': item.value + '%' }, key: i }, /*#__PURE__*/
          React.createElement("span", null, item.value, "%")));
      }
    }, this);
    let calibrations = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "graduation", style: { 'color': item.color, 'width': item.value + '%' }, key: i }, /*#__PURE__*/
          React.createElement("span", null, "|")));
      }
    }, this);
    let bars = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "bar", style: { 'backgroundColor': item.color, 'width': item.value + '%' }, key: i }));
      }
    }, this);
    let legends = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "legend", key: i }, /*#__PURE__*/
          React.createElement("span", { className: "dot", style: { 'color': item.color } }, "\u25CF"), /*#__PURE__*/
          React.createElement("span", { className: "label" }, item.name)));
      }
    }, this);
    return /*#__PURE__*/(
      React.createElement("div", { className: "multicolor-bar" }, /*#__PURE__*/
      React.createElement("div", { className: "values" },
      values == '' ? '' : values), /*#__PURE__*/
      React.createElement("div", { className: "scale" },
      calibrations == '' ? '' : calibrations), /*#__PURE__*/
      React.createElement("div", { className: "bars" },
      bars == '' ? '' : bars), /*#__PURE__*/
      React.createElement("div", { className: "legends" },
      legends == '' ? '' : legends)));
  }}
let readings = [
{
  name: 'Apples',
  value: 60,
  color: '#eb4d4b' },
{
  name: 'Blueberries',
  value: 7,
  color: '#22a6b3' },
{
  name: 'Guavas',
  value: 23,
  color: '#6ab04c' },
{
  name: 'Grapes',
  value: 10,
  color: '#e056fd' }];
React.render( /*#__PURE__*/React.createElement(MultiColorProgressBar, { readings: readings }), document.getElementById('root'));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/cjs/react-dom-server.browser.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.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/0.13.0/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/cjs/react-dom-server.browser.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js'></script>
<style>
.multicolor-bar {
	margin: 20px 20%;
}
.multicolor-bar .values .value {
	float: left;
	text-align: center;
}
.multicolor-bar .scale .graduation {
	float: left;
	text-align: center;
}
.multicolor-bar .bars .bar {
	float: left;
	height: 10px;
}
.multicolor-bar .bars div.bar:first-of-type {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.multicolor-bar .bars div.bar:last-of-type {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.multicolor-bar .legends {
	text-align: center;
}
.multicolor-bar .legends .legend {
	display: inline-block;
	margin: 0 5px;
	text-align: center;
}
.multicolor-bar .legends .legend .dot {
	font-size: 25px;
	vertical-align: middle;
}
.multicolor-bar .legends .legend .label {
	margin-left: 2px;
	vertical-align: middle;
}
</style>

</head>
<body>
<div id="root">
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class MultiColorProgressBar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const parent = this.props;
    let values = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "value", style: { 'color': item.color, 'width': item.value + '%' }, key: i }, /*#__PURE__*/
          React.createElement("span", null, item.value, "%")));
      }
    }, this);
    let calibrations = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "graduation", style: { 'color': item.color, 'width': item.value + '%' }, key: i }, /*#__PURE__*/
          React.createElement("span", null, "|")));
      }
    }, this);
    let bars = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "bar", style: { 'backgroundColor': item.color, 'width': item.value + '%' }, key: i }));
      }
    }, this);
    let legends = parent.readings && parent.readings.length && parent.readings.map(function (item, i) {
      if (item.value > 0) {
        return /*#__PURE__*/(
          React.createElement("div", { className: "legend", key: i }, /*#__PURE__*/
          React.createElement("span", { className: "dot", style: { 'color': item.color } }, "\u25CF"), /*#__PURE__*/
          React.createElement("span", { className: "label" }, item.name)));
      }
    }, this);
    return /*#__PURE__*/(
      React.createElement("div", { className: "multicolor-bar" }, /*#__PURE__*/
      React.createElement("div", { className: "values" },
      values == '' ? '' : values), /*#__PURE__*/
      React.createElement("div", { className: "scale" },
      calibrations == '' ? '' : calibrations), /*#__PURE__*/
      React.createElement("div", { className: "bars" },
      bars == '' ? '' : bars), /*#__PURE__*/
      React.createElement("div", { className: "legends" },
      legends == '' ? '' : legends)));
  }}
let readings = [
{
  name: 'Apples',
  value: 60,
  color: '#eb4d4b' },
{
  name: 'Blueberries',
  value: 7,
  color: '#22a6b3' },
{
  name: 'Guavas',
  value: 23,
  color: '#6ab04c' },
{
  name: 'Grapes',
  value: 10,
  color: '#e056fd' }];
React.render( /*#__PURE__*/React.createElement(MultiColorProgressBar, { readings: readings }), document.getElementById('root'));
</script>

</body>
</html>
Preview