React Progress Bars:

Circular React Progress Bar with Increase/Decrease Buttons

People have a better reaction to progress bars because they find out the concept better. So, if you have a page or website, we recommend using different kinds of progress bars to increase the number of your users. This post contains the Circular React Progress Bar with Increase/Decrease Buttons with a beautiful effect. Using this Free Circular Progress Bar allows you to have more readable and understandable subjects on websites. Most professional website admins prefer to use the React Progress Bar Code to have a large number of users.

There is a preview of this Progress Bar with Button that shows the elements of the code. By looking at this picture, you realize that the following code has a white background with two blue buttons. There is a percentage in the middle of these buttons in black color. If you click on the “Increase Progress” option, the progress bar moves forward and by clicking on the “Decrease Button”, it turns vice versa. With each click, the progress bar moves by 10%. The main progress bar has a green color with white background. Download and use this Javascript Progress Bar for free to increase your audience.

Free Circular Progress Bar

Progress Bar with Button

Javascript Progress Bar

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

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
svg {
  margin-right: 1rem;
}
strong {
  display: inline-block;
  font-size: 1.2rem;
  min-width: 6ch;
  text-align: center;
}
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 5px;
  background: indigo;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5em 1em;
}
button:focus, button:active {
  background: mediumorchid;
  outline: none;
}
button[disabled] {
  background: darkgrey;
}

class RadialProgressIndicator extends React.Component {
  render() {
    const { progress, strokeColor, strokeWidth, width } = this.props;
    // Determine the center of the circle, as that will be both the `cx` and the `cy` attribute.
    const center = width / 2;
    // The stroke is applied half inside the circle, so we need to account for it in order to make it appear outside the circle.
    const radius = width / 2 - strokeWidth / 2;
    // Set the circumference of the circle as our `stroke-dasharray` and our initial `stroke-dashoffset`
    const strokeDasharray = 2 * radius * Math.PI;
    // Express progress as a percentage of stroke-dasharray. The difference between stroke-dasharray and this percentage is the stroke-dashoffset
    const strokeDashoffset = progress > 0 ? strokeDasharray - strokeDasharray / 100 * progress : strokeDasharray;
    // We make a perfect circle, so it fits in a square.
    const height = width;
    return /*#__PURE__*/(
      React.createElement("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        height: height,
        width: width,
        viewBox: `0 0 ${width} ${height}` }, /*#__PURE__*/
      React.createElement("circle", {
        cx: center,
        cy: center,
        r: radius,
        fill: "none",
        stroke: strokeColor,
        strokeWidth: strokeWidth,
        strokeDasharray: strokeDasharray,
        strokeDashoffset: strokeDashoffset,
        transform: `rotate(270, ${center}, ${center})` })));
  }}


class App extends React.Component {
  constructor(props) {
    super(props);
    this._onIncreaseClick = this._onIncreaseClick.bind(this);
    this._onDecreaseClick = this._onDecreaseClick.bind(this);
    this.state = {
      progress: 20 };
  }
  _onIncreaseClick() {
    // Increase progress but not further than 100.
    this.setState({
      progress: Math.min(100, this.state.progress + 10) });
  }
  _onDecreaseClick() {
    // Decrease progress but not further than 0.
    this.setState({
      progress: Math.max(0, this.state.progress - 10) });
  }
  render() {
    const { progress } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("button", { onClick: this._onDecreaseClick, disabled: progress === 0 }, "Decrease progress"), /*#__PURE__*/
      React.createElement("strong", null, this.state.progress, "%"), /*#__PURE__*/
      React.createElement("button", { onClick: this._onIncreaseClick, disabled: progress === 100 }, "Increase progress")), /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(RadialProgressIndicator, { strokeColor: "#BADA55", strokeWidth: 10, width: 100, progress: progress }), /*#__PURE__*/
      React.createElement(RadialProgressIndicator, { strokeColor: "#BADA55", strokeWidth: 20, width: 200, progress: progress }), /*#__PURE__*/
      React.createElement(RadialProgressIndicator, { strokeColor: "#BADA55", strokeWidth: 30, width: 300, progress: progress }))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.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/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<style>
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
svg {
  margin-right: 1rem;
}
strong {
  display: inline-block;
  font-size: 1.2rem;
  min-width: 6ch;
  text-align: center;
}
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 5px;
  background: indigo;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5em 1em;
}
button:focus, button:active {
  background: mediumorchid;
  outline: none;
}
button[disabled] {
  background: darkgrey;
}
</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 RadialProgressIndicator extends React.Component {
  render() {
    const { progress, strokeColor, strokeWidth, width } = this.props;
    // Determine the center of the circle, as that will be both the `cx` and the `cy` attribute.
    const center = width / 2;
    // The stroke is applied half inside the circle, so we need to account for it in order to make it appear outside the circle.
    const radius = width / 2 - strokeWidth / 2;
    // Set the circumference of the circle as our `stroke-dasharray` and our initial `stroke-dashoffset`
    const strokeDasharray = 2 * radius * Math.PI;
    // Express progress as a percentage of stroke-dasharray. The difference between stroke-dasharray and this percentage is the stroke-dashoffset
    const strokeDashoffset = progress > 0 ? strokeDasharray - strokeDasharray / 100 * progress : strokeDasharray;
    // We make a perfect circle, so it fits in a square.
    const height = width;
    return /*#__PURE__*/(
      React.createElement("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        height: height,
        width: width,
        viewBox: `0 0 ${width} ${height}` }, /*#__PURE__*/
      React.createElement("circle", {
        cx: center,
        cy: center,
        r: radius,
        fill: "none",
        stroke: strokeColor,
        strokeWidth: strokeWidth,
        strokeDasharray: strokeDasharray,
        strokeDashoffset: strokeDashoffset,
        transform: `rotate(270, ${center}, ${center})` })));
  }}


class App extends React.Component {
  constructor(props) {
    super(props);
    this._onIncreaseClick = this._onIncreaseClick.bind(this);
    this._onDecreaseClick = this._onDecreaseClick.bind(this);
    this.state = {
      progress: 20 };
  }
  _onIncreaseClick() {
    // Increase progress but not further than 100.
    this.setState({
      progress: Math.min(100, this.state.progress + 10) });
  }
  _onDecreaseClick() {
    // Decrease progress but not further than 0.
    this.setState({
      progress: Math.max(0, this.state.progress - 10) });
  }
  render() {
    const { progress } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("button", { onClick: this._onDecreaseClick, disabled: progress === 0 }, "Decrease progress"), /*#__PURE__*/
      React.createElement("strong", null, this.state.progress, "%"), /*#__PURE__*/
      React.createElement("button", { onClick: this._onIncreaseClick, disabled: progress === 100 }, "Increase progress")), /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(RadialProgressIndicator, { strokeColor: "#BADA55", strokeWidth: 10, width: 100, progress: progress }), /*#__PURE__*/
      React.createElement(RadialProgressIndicator, { strokeColor: "#BADA55", strokeWidth: 20, width: 200, progress: progress }), /*#__PURE__*/
      React.createElement(RadialProgressIndicator, { strokeColor: "#BADA55", strokeWidth: 30, width: 300, progress: progress }))));
  }}
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