React Progress Bars:

Circular Progress Bar using React js Related to Horizintal Bar

Progress bar is one of the most important parts of any website. You can use the following code in order to increase the number of your visitors. With the help of this amazing Circular Progress Bar Code, you can represent your progress website to your audiences. On the other hand, this React Progress Bar is designed graphically in order to show the progression of a website. These graphic bars are mostly accompanied by text to be more understandable.

The preview of this Free Progress Bar Code Example is presented below and shows bootstrap’s elements. This card has a white background with a blue theme. So, use it on your website if you have a white-designed page. There is a circle in the middle of the page and the percentage progression is located in the center with blue color. Plus, you can see a line at the bottom of the circle. As you progress in your job, the blue color moves around the circle and the line will turn blue. Therefore, use the following React Horizontal Progress Bar Code and apply it to your website to attract new visitors. You also can interest older audiences to improve your website.

Circular Progress Bar Code

React Progress Bar

Free Progress Bar Code Example

React Horizontal Progress Bar Code

<!-- 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>

* {
	box-sizing: border-box;
	line-height: 1;
}
*::before, *::after {
	box-sizing: border-box;
}
html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	width: 100%;
	height: auto;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: white;
	background-color: #282c34;
}
.progressApp {
	display: inline-block;
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 300px;
	margin-top: 100px;
	background-color: white;
	border: 3px solid lightgray;
	border-radius: 5px;
}
.circle-svg {
	display: block;
	margin: 25px auto;
}
#progressInput {
	display: block;
	margin: 25px auto;
	width: 90%;
}
.circle-background, .circle-progress {
	fill: none;
}
.circle-background {
	stroke: #ddd;
	stroke: lightgray;
}
.circle-progress {
	stroke: #61DAFB;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.circle-text {
	font-size: 3em;
	font-weight: bold;
	fill: #61DAFB;
}

class CircularProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    //Size of the enclosing square
    const sqSize = this.props.sqSize;
    //SVG centers the stroke width on the radius, subtract out so circle fits in square
    const radius = (this.props.sqSize - this.props.strokeWidth) / 2;
    //Enclose cicle in a circumscribing square
    const viewBox = `0 0 ${sqSize} ${sqSize}`;
    //Arc length at 100% coverage is the circle circumference
    const dashArray = radius * Math.PI * 2;
    //Scale 100% coverage overlay with the actual percent
    const dashOffset = dashArray - dashArray * this.props.percentage / 100;
    return /*#__PURE__*/(
      React.createElement("svg", { className: "circle-svg",
        width: this.props.sqSize,
        height: this.props.sqSize,
        viewBox: viewBox }, /*#__PURE__*/
      React.createElement("circle", {
        className: "circle-background",
        cx: this.props.sqSize / 2,
        cy: this.props.sqSize / 2,
        r: radius,
        strokeWidth: `${this.props.strokeWidth}px` }), /*#__PURE__*/
      React.createElement("circle", {
        className: "circle-progress",
        cx: this.props.sqSize / 2,
        cy: this.props.sqSize / 2,
        r: radius,
        strokeWidth: `${this.props.strokeWidth}px`
        // Start progress marker at 12 O'Clock
        , transform: `rotate(-90 ${this.props.sqSize / 2} ${this.props.sqSize / 2})`,
        style: {
          strokeDasharray: dashArray,
          strokeDashoffset: dashOffset } }), /*#__PURE__*/
      React.createElement("text", {
        className: "circle-text",
        x: "50%",
        y: "50%",
        dy: ".3em",
        textAnchor: "middle" },
      `${this.props.percentage}%`)));
  }}
CircularProgressBar.defaultProps = {
  sqSize: 200,
  percentage: 25,
  strokeWidth: 10 };
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      percentage: 25 };
    this.handleChangeEvent = this.handleChangeEvent.bind(this);
  }
  handleChangeEvent(event) {
    this.setState({
      percentage: event.target.value });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "progressApp" }, /*#__PURE__*/
      React.createElement(CircularProgressBar, {
        strokeWidth: "10",
        sqSize: "200",
        percentage: this.state.percentage }), /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("input", {
        id: "progressInput",
        type: "range",
        min: "0",
        max: "100",
        step: "1",
        value: this.state.percentage,
        onChange: this.handleChangeEvent }))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.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.8.6/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script>
<style>
* {
	box-sizing: border-box;
	line-height: 1;
}
*::before, *::after {
	box-sizing: border-box;
}
html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	width: 100%;
	height: auto;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: white;
	background-color: #282c34;
}
.progressApp {
	display: inline-block;
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 300px;
	margin-top: 100px;
	background-color: white;
	border: 3px solid lightgray;
	border-radius: 5px;
}
.circle-svg {
	display: block;
	margin: 25px auto;
}
#progressInput {
	display: block;
	margin: 25px auto;
	width: 90%;
}
.circle-background, .circle-progress {
	fill: none;
}
.circle-background {
	stroke: #ddd;
	stroke: lightgray;
}
.circle-progress {
	stroke: #61DAFB;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.circle-text {
	font-size: 3em;
	font-weight: bold;
	fill: #61DAFB;
}
</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 CircularProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    //Size of the enclosing square
    const sqSize = this.props.sqSize;
    //SVG centers the stroke width on the radius, subtract out so circle fits in square
    const radius = (this.props.sqSize - this.props.strokeWidth) / 2;
    //Enclose cicle in a circumscribing square
    const viewBox = `0 0 ${sqSize} ${sqSize}`;
    //Arc length at 100% coverage is the circle circumference
    const dashArray = radius * Math.PI * 2;
    //Scale 100% coverage overlay with the actual percent
    const dashOffset = dashArray - dashArray * this.props.percentage / 100;
    return /*#__PURE__*/(
      React.createElement("svg", { className: "circle-svg",
        width: this.props.sqSize,
        height: this.props.sqSize,
        viewBox: viewBox }, /*#__PURE__*/
      React.createElement("circle", {
        className: "circle-background",
        cx: this.props.sqSize / 2,
        cy: this.props.sqSize / 2,
        r: radius,
        strokeWidth: `${this.props.strokeWidth}px` }), /*#__PURE__*/
      React.createElement("circle", {
        className: "circle-progress",
        cx: this.props.sqSize / 2,
        cy: this.props.sqSize / 2,
        r: radius,
        strokeWidth: `${this.props.strokeWidth}px`
        // Start progress marker at 12 O'Clock
        , transform: `rotate(-90 ${this.props.sqSize / 2} ${this.props.sqSize / 2})`,
        style: {
          strokeDasharray: dashArray,
          strokeDashoffset: dashOffset } }), /*#__PURE__*/
      React.createElement("text", {
        className: "circle-text",
        x: "50%",
        y: "50%",
        dy: ".3em",
        textAnchor: "middle" },
      `${this.props.percentage}%`)));
  }}
CircularProgressBar.defaultProps = {
  sqSize: 200,
  percentage: 25,
  strokeWidth: 10 };
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      percentage: 25 };
    this.handleChangeEvent = this.handleChangeEvent.bind(this);
  }
  handleChangeEvent(event) {
    this.setState({
      percentage: event.target.value });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "progressApp" }, /*#__PURE__*/
      React.createElement(CircularProgressBar, {
        strokeWidth: "10",
        sqSize: "200",
        percentage: this.state.percentage }), /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("input", {
        id: "progressInput",
        type: "range",
        min: "0",
        max: "100",
        step: "1",
        value: this.state.percentage,
        onChange: this.handleChangeEvent }))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS