10+ React Progress Bar Examples

This post contains a total of 10+ React Progress Bar Examples with Source Code. All these Progress Bars are made using React JavaScript Library.

You can use the source code of these examples with credits to the original owner.

Related Posts

React Progress Bar Examples

1. By Stav Kamil

Made by Stav Kamil. A simple React Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: #f4f4f4;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}

.progress {
	background-color: #d8d8d8;
	border-radius: 20px;
	position: relative;
	margin: 15px 0;
	height: 30px;
	width: 300px;
}

.progress-done {
	background: linear-gradient(to left, #F2709C, #FF9472);
	box-shadow: 0 3px 3px -5px #F2709C, 0 2px 5px #F2709C;
	border-radius: 20px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 1s ease 0.3s;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js'></script>
      <script>
const Progress = ({ done }) => {
  const [style, setStyle] = React.useState({});

  setTimeout(() => {
    const newStyle = {
      opacity: 1,
      width: `${done}%` };


    setStyle(newStyle);
  }, 200);

  return /*#__PURE__*/(
    React.createElement("div", { className: "progress" }, /*#__PURE__*/
    React.createElement("div", { className: "progress-done", style: style },
    done, "%")));



};

const App = () => /*#__PURE__*/
React.createElement(React.Fragment, null, /*#__PURE__*/
React.createElement("h1", null, "React Progress Bar"), /*#__PURE__*/
React.createElement(Progress, { done: "46" }));

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

2. By Zach Whitener

Made by Zach Whitener. Progress Bar with Increase Progress button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background: #eee;
}

.container {
  width: 800px;
  padding: 100px 40px;
  background:#fff;
  margin: 50px auto;
  text-align:center;
  box-shadow: 1px 5px 5px 1px rgba(0,0,0,0.3);
  
}

.progress-bar {
  width: 750px;
  height: 40px;
  border-radius: 25px;
  border: none /**2px solid #eee**/;
  padding: 0;
  margin: 0 auto;
}

.progress-bar-inner {
  height: 100%;
  border-radius: 25px;
  background: #34a853;
  width: 0px;
  text-align: center;
}

.progress-bar-inner p {
   color: #fff;
   display: inline;
   font-size: 20px;
   font-weight: bold;
   position: relative;
   top: 6px;

  
}
.p-25, .p-50, .p-75 {
  border-radius: 25px 0 0 25px;
}

.p-25, .p-50, .p-75, .p-100 {
  transition: 1s all;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.p-25 { width: 25%; }
.p-50 { width: 50%; }
.p-75 { width: 75%; }
.p-100 { width: 100%; }

button {
  margin-bottom: 50px;
  padding: 20px 25px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  background: #29999f;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  outline: 0;
  border-radius: 5px;
}
button:hover {
  background: #347c8a;
  transition: 0.2s all;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
      <script>
class ProgressBar extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { ref: "progressBar", className: "progress-bar" }, /*#__PURE__*/
      React.createElement("div", { className: `progress-bar-inner p-${this.props.progress}` },
      this.props.progress > 0 && /*#__PURE__*/
      React.createElement("p", null, this.props.progress, "%"))));

  }}

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      progress: 0 };

  }

  handleButtonClick() {

    this.setState({
      progress: this.state.progress === 100 ? 0 : this.state.progress + 25 });


  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "container" }, /*#__PURE__*/
      React.createElement("button", { onClick: this.handleButtonClick.bind(this) }, "Increase Progress"), /*#__PURE__*/


      React.createElement(ProgressBar, { progress: this.state.progress })));


  }}

const root = document.getElementById("root");
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), root);
//# sourceURL=pen.js
    </script>
</body>
</html>

3. By Josh Bivens

Made by Josh Bivens. React Progress bar with Plus Button. Source

<!DOCTYPE html>
<html lang="en" >

<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<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>
  <script src='//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
      <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);
//# sourceURL=pen.js
    </script>
</body>
</html>
 

4. By Canaan Seaton

Made by Canaan Seaton. Circular Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> 
<style>
html,
body {
  height: 100%;
  width: 100%;
}

.site-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
}
.site-wrapper .container {
  height: 400px;
  width: 700px;
  margin: auto;
  display: flex;
  border: black 2px solid;
}

svg {
  margin: auto;
  background: transparent;
}
svg:hover {
  background: grey;
}
svg circle {
  stroke-width: 5px;
  stroke: #d3d3d3;
  fill: transparent;
  stroke-linecap: round;
  r: 95;
  transform-origin: 50% 50%;
  transform: rotateZ(-90deg);
}

#progress {
  stroke: #FF672F;
  stroke-dasharray: 596.885 596.885;
  animation: progress 2s alternate infinite;
}

@keyframes progress {
  from {
    stroke-dashoffset: 596.885;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>
</head>
<body>
  <body>
  <div class="site-wrapper">
    <div class="container">
      <svg height="200" width="200">
        <circle cx="100" cy="100"></circle>
        <circle id="progress" cx="100" cy="100"></circle>
        <text cx="100" cy="100" fill="black">
          <65>&#37</65>
        </text>
      </svg>
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
</body>
</html>

5. By Nikita

Made by Nikita. React Steps progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://codepen.io/karmacan/pen/ExNQzgd.css'>
  
<style>
.Progress-bar {
  --btn-margin-x: 0.5rem;
  --btn-width: 60px;
  --btn-right-shift: calc(var(--btn-margin-x) + var(--btn-width) / 2);
}
.Progress-bar .stages {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  width: 600px;
  max-width: 90vw;
  /* Progress line unactive */
}
.Progress-bar .stages:before {
  content: "";
  position: absolute;
  background: #e0e0e0;
  top: 50%;
  z-index: -1;
  height: 4px;
  width: 100%;
  transform: translateY(-50%);
}
.Progress-bar .stages .progress-line {
  position: absolute;
  background: #3498db;
  top: 50%;
  z-index: -1;
  height: 4px;
  width: 0%;
  transform: translateY(-50%);
  transition: width ease 1s;
}
.Progress-bar .stages .stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  background: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 50%;
  color: #999;
  user-select: none;
  transition: border-color ease 1s;
}
.Progress-bar .stages .stage.selected {
  border-color: #3498db;
  color: #111;
}
.Progress-bar .ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
}
.Progress-bar .ctrl .btn {
  position: relative;
  padding: 0.2rem 0.4rem;
  margin: 0.2rem var(--btn-margin-x);
  width: var(--btn-width);
  background: #ddd;
  border-radius: 100rem;
  user-select: none;
  cursor: pointer;
  text-align: center;
  /* opacity: 1; */
  transition: opacity ease 1s;
}
.Progress-bar .ctrl .btn :hover {
  background: #ccc;
}
.Progress-bar .ctrl .btn.hidden {
  visibility: hidden;
  opacity: 0;
}
.Progress-bar .ctrl .btn#next {
  position: relative;
  right: var(--btn-right-shift);
  transition: right ease-out 1s;
}
</style>
</head>
<body>
  <div id="root"></div>
      <script type="module">
import React from "https://cdn.skypack.dev/[email protected]";
import ReactDOM from "https://cdn.skypack.dev/[email protected]";

const ProgressBar = () => {
  const stagesRef = React.useRef(null);
  const progressLineRef = React.useRef(null);
  const buttonNextRef = React.useRef(null);
  const buttonPrevRef = React.useRef(null);
  const [progressIncrement, setProgressIncrement] = React.useState(0);
  const [progressPercent, setProgressPercent] = React.useState(0);
  const [activeStage, setActiveStage] = React.useState(0);

  React.useEffect(() => {
    const stageElements = stagesRef.current.querySelectorAll(".stage");
    const increment = Math.floor(100 / (stageElements.length - 1));
    setProgressIncrement(increment);
  }, []);

  const handleButtonNextClick = ev => {
    if (activeStage >= stagesRef.current.querySelectorAll(".stage").length - 1)
    return;
    if (activeStage === 0) {
      buttonPrevRef.current.classList.remove("hidden");
      buttonNextRef.current.style.right = "0";
    }
    progressLineRef.current.style.width = `${
    progressPercent + progressIncrement
    }%`;
    setProgressPercent(progressPercent + progressIncrement);
    stagesRef.current.
    querySelectorAll(".stage").
    forEach((stageElement, key) => {
      if (key <= activeStage + 1) {
        stageElement.classList.add("selected");
      }
    });
    setActiveStage(activeStage + 1);
  };

  const handleButtonPrevClick = ev => {
    if (activeStage <= 0) return;
    if (activeStage === 1) {
      buttonPrevRef.current.classList.add("hidden");
      buttonNextRef.current.style.right = "var(--btn-right-shift)";
    }
    progressLineRef.current.style.width = `${
    progressPercent - progressIncrement
    }%`;
    setProgressPercent(progressPercent - progressIncrement);
    stagesRef.current.
    querySelectorAll(".stage").
    forEach((stageElement, key) => {
      if (key > activeStage - 1) {
        stageElement.classList.remove("selected");
      }
    });
    setActiveStage(activeStage - 1);
  };

  return /*#__PURE__*/(
    React.createElement("div", { className: "Progress-bar" }, /*#__PURE__*/
    React.createElement("div", { ref: stagesRef, className: "stages" }, /*#__PURE__*/
    React.createElement("div", { ref: progressLineRef, className: "progress-line" }), /*#__PURE__*/
    React.createElement("div", { className: "stage selected" }, "1"), /*#__PURE__*/
    React.createElement("div", { className: "stage" }, "2"), /*#__PURE__*/
    React.createElement("div", { className: "stage" }, "3"), /*#__PURE__*/
    React.createElement("div", { className: "stage" }, "4")), /*#__PURE__*/

    React.createElement("div", { className: "ctrl" }, /*#__PURE__*/
    React.createElement("div", {
      ref: buttonPrevRef,
      className: "btn hidden",
      id: "prev",
      onClick: handleButtonPrevClick }, "Prev"), /*#__PURE__*/



    React.createElement("div", {
      ref: buttonNextRef,
      className: "btn",
      id: "next",
      onClick: handleButtonNextClick }, "Next"))));

};

ReactDOM.render( /*#__PURE__*/React.createElement(ProgressBar, null), document.querySelector("#root"));
//# sourceURL=pen.js
    </script>
</body>
</html>

6. By Juan Garassino

Made by Juan Garassino. React progress bar with Progress input box. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
* {
  font-family: "Lato", sans-serif;
}

.control-percentage {
  text-align: center;
  margin: 15px auto;
  font-size: 2em;
  display: flex;
  width: 600px;
  justify-content: center;
}
.control-percentage:last-child {
  margin-left: auto;
}
.control-percentage .manual-percentage {
  margin: 0 15px;
  text-align: center;
  font-size: 0.5em;
}
.control-percentage a {
  cursor: pointer;
  margin: 0 10px;
}
.control-percentage a.add:active {
  color: green;
}
.control-percentage a.substract:active {
  color: red;
}
.control-percentage a:last-child {
  margin-left: auto;
}

.progress-box {
  height: 51px;
  width: 600px;
  background-color: lightgray;
  border-radius: 10px;
  margin: auto;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  align-items: center;
}
.progress-box .percentage {
  font-size: 1.5em;
  position: absolute;
  z-index: 1;
  font-weight: bold;
}
.progress-box .background-percentage {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 49px;
  border-radius: 8px;
  background-color: red;
  transition: width 1s ease;
}
</style>
</head>
<body>
  <div id="root"> 
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
      <script>
/*
 * A simple React component
 */
class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    let percentage = this.props.percentage;
    if (percentage >= 100) {
      percentage = 100;
    }
    if (percentage <= 0) {
      percentage = 0;
    }
    return /*#__PURE__*/(
      React.createElement("div", { className: "progress-box" }, /*#__PURE__*/
      React.createElement("div", { className: "percentage" },
      percentage, " %"), /*#__PURE__*/

      React.createElement("div", { className: "background-percentage",
        style: { width: percentage + '%',
          backgroundColor: percentage > 50 ? '#33ff33' : '#ff471a' } })));



  }}


class ControlPanel extends React.Component {

  handleInput(e) {
    let qty = e.target.value;

    if (qty > 100) {
      e.target.value = 100;
    }
    this.props.onKeyupChange(qty);
  }

  handleChange(qty) {
    this.props.percentage = 0;
    event.preventDefault();
    this.props.onClickChange(qty);
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "control-percentage" }, /*#__PURE__*/
      React.createElement("input", { className: "manual-percentage", type: "text",
        onKeyUp: e => this.handleInput(e) })));


  }}


class ProgressBar extends React.Component {
  constructor() {
    super();
    this.state = {
      percentage: 50 };

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(qty) {
    this.setState({ percentage: qty });
  }

  handleClick(qty) {
    switch (qty) {
      case 10:
        this.setState({ percentage: this.state.percentage + qty });
        break;
      case 1:
        this.setState({ percentage: this.state.percentage + qty });
        break;
      case -1:
        this.setState({ percentage: this.state.percentage + qty });
        break;
      case -10:
        this.setState({ percentage: this.state.percentage + qty });
        break;
      case 'random':
        this.setState({ percentage: Math.ceil(Math.random() * 100) });
      default:
        break;}

  }
  render() {
    const percentage = this.state.percentage;
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(ControlPanel, { onClickChange: this.handleClick,
        onKeyupChange: this.handleChange }), /*#__PURE__*/
      React.createElement(Bar, { percentage: percentage })));

  }}


/*
 * Render the above component into the div#app
 */
ReactDOM.render( /*#__PURE__*/React.createElement(ProgressBar, null), document.getElementById('root'));
    </script>
</body>
</html>

7. By Rafael Derolez

Made by Rafael Derolez. Progress bar with Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
/**
 * Demo variables
 */
/**
 * Demo Styles
 */
[data-reactroot], body {
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  box-sizing: border-box;
}

body {
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 8px;
  background-color: #657AED;
  font-family: "Nunito", sans-serif;
}

.thanks {
  margin-top: 50px;
  color: #FFF;
  opacity: 0.5;
  font-size: 12px;
}
.thanks a {
  color: #FFF;
}

[data-reactroot] {
  flex-direction: column;
}

#progress {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

input {
  margin: 50px auto;
  display: block;
}

/**
 * Progress Bar variables
 */
/**
 * Progress Bar styles
 */
.progress-bar {
  width: 100%;
}

.progress-bar__bar {
  border-radius: 10px;
  background-color: #FFF;
  margin-bottom: 14px;
}

.progress-bar__progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  min-width: 15px;
  height: 10px;
  border-radius: 10px;
  background-color: #76E19E;
  transition: background-color 0.3s ease;
}

.progress-bar__progress--step-1 {
  background-color: #FB7593;
}

.progress-bar__progress--step-2 {
  background-color: #FFD05C;
}

.progress-bar__progress--step-3 {
  background-color: #76E19E;
}

.progress-bar__progress--step-completed {
  background-color: #76E19E;
}

.progress-bar__tick-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  opacity: 0;
  background-color: #76E19E;
  transition: all 0.15s ease;
  transform: scale(0);
}
.progress-bar__progress--step-completed .progress-bar__tick-wrapper {
  opacity: 1;
  transform: scale(1);
}

.progress-bar__tick {
  width: 15px;
  height: 16px;
  fill: #FFF;
}

.progress-bar__label {
  display: block;
  font-size: rem(16);
  text-align: center;
  color: #FFF;
}

.progress-bar__label--left {
  text-align: left;
}
</style>
</head>
<body>
  <div id="progress"></div>
<span class='thanks'>(thanks <a href='https://codepen.io/Grsmto/'>grsmto</a> for helping out)</span>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js'></script>
      <script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} /*!
  Copyright (c) 2017 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/
/* global define */

(function () {
  'use strict';

  var hasOwn = {}.hasOwnProperty;

  function classNames() {
    var classes = [];

    for (var i = 0; i < arguments.length; i++) {if (window.CP.shouldStopExecution(0)) break;
      var arg = arguments[i];
      if (!arg) continue;

      var argType = typeof arg;

      if (argType === 'string' || argType === 'number') {
        classes.push(arg);
      } else if (Array.isArray(arg) && arg.length) {
        var inner = classNames.apply(null, arg);
        if (inner) {
          classes.push(inner);
        }
      } else if (argType === 'object') {
        for (var key in arg) {
          if (hasOwn.call(arg, key) && arg[key]) {
            classes.push(key);
          }
        }
      }
    }window.CP.exitedLoop(0);

    return classes.join(' ');
  }

  if (typeof module !== 'undefined' && module.exports) {
    classNames.default = classNames;
    module.exports = classNames;
  } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
    // register as 'classnames', consistent with npm package name
    define('classnames', [], function () {
      return classNames;
    });
  } else {
    window.classNames = classNames;
  }
})();

/*
  Progress bar script
*/
const ProgressBar = ({ className, progress, labelLeft }) => {
  let progressInt = parseInt(progress);
  const progressClassPrefix = `progress-bar__progress--step-`;
  const progressClassNames = {
    [`${progressClassPrefix}1`]: progressInt <= 25,
    [`${progressClassPrefix}2`]: progressInt > 25 && progressInt <= 50,
    [`${progressClassPrefix}3`]: progressInt > 50 && progressInt <= 99,
    [`${progressClassPrefix}completed`]: progressInt === 100 };


  return /*#__PURE__*/(
    React.createElement("div", { className: classNames('progress-bar', className) }, /*#__PURE__*/
    React.createElement("div", { className: "progress-bar__bar" }, /*#__PURE__*/
    React.createElement("div", {
      className: classNames('progress-bar__progress', progressClassNames),
      style: { width: progress + '%' } }, /*#__PURE__*/
    React.createElement("div", { className: "progress-bar__tick-wrapper" }, /*#__PURE__*/
    React.createElement("svg", { className: "progress-bar__tick icon-tick", viewBox: "0 0 512 512" }, /*#__PURE__*/React.createElement("path", { d: "m135 280l97 97c20 20 20 52 0 72-20 20-53 20-73 0l-96-96c-20-20-20-53 0-73 20-20 52-20 72 0z m300-106c20 20 20 52 0 72l-193 193c-20 20-53 20-73 0-20-20-20-52 0-72l194-193c20-20 52-20 72 0z" }))))), /*#__PURE__*/



    React.createElement("span", { className: classNames('progress-bar__label', { 'progress-bar__label--left': labelLeft }) },

    progressInt === 0 ?
    `No scenes completed` :
    `${progress}% of scenes completed`)));

};

class CodepenProgressBar extends React.Component {
  constructor() {
    super();_defineProperty(this, "onChange",

    e => {
      this.setState({
        progress: e.currentTarget.value,
        value: e.currentTarget.value });

    });this.state = { progress: 50, value: 50 };}

  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(ProgressBar, { progress: this.state.progress }), /*#__PURE__*/
      React.createElement("input", { type: "range", value: this.state.value, onChange: this.onChange })));


  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(CodepenProgressBar, null), document.getElementById('progress'));
//# sourceURL=pen.js
    </script>
</body>
</html>

8. By Mark Howard

Made by Mark Howard. React progress bar WIP. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-container {
  background: #555;
  padding: 3px;
  width: 50%;
  border-radius: 10px;
}

.bar {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.7s ease-out;
  border-radius: 10px;
  background: dodgerblue;
  width: 50%;
  height: 20px;
  color: white;
}

button {
  margin-bottom: 20px;
  border: 0;
  background: dodgerblue;
  color: white;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
}
button:hover {
  background: #005db7;
}
</style>
</head>
<body>
  <div id="progress-bar"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
      <script id="rendered-js" >
class ProgressBar extends React.Component {
  constructor() {
    super();
    this.state = {
      progress: "10%" };

  }
  handleClick() {
    this.setState({
      progress: "100%" });

  }
  render() {
    const styles = {
      width: this.state.progress };

    return /*#__PURE__*/(
      React.createElement("div", { className: "container" }, /*#__PURE__*/
      React.createElement("button", { onClick: this.handleClick.bind(this) }, "Set to 100%"), /*#__PURE__*/
      React.createElement("div", { className: "progress-container" }, /*#__PURE__*/
      React.createElement("div", { className: "bar", style: styles }))));

  }}

ReactDOM.render( /*#__PURE__*/React.createElement(ProgressBar, null), document.getElementById("progress-bar"));
//# sourceURL=pen.js
    </script>
</body>
</html>

9. By Mindgames

Made by Mindgames. Basic Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.progressbar .progress {
  color: #fff;
  background-color: #007bff;
  border-radius: 28px;
  transition: width 800ms ease-in-out;
  transition-delay: 3000ms;
  height: 100%;
}

.progressbar {
  width: 100%;
  height: 24px;
  border-radius: 28px;
  background-color: #a2a9b3;
}

#root {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#App {
  width: 70%;
  height: 100%;
  margin: 100px auto;
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
      <script>
const ProgressBar = ({ progress }) => /*#__PURE__*/
React.createElement("div", { className: "progressbar" }, /*#__PURE__*/
React.createElement("div", { className: "progress", style: { width: `${progress}%` } }));



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { progress: 0 };
  }

  componentDidMount() {
    setTimeout(
    function () {
      this.setState({ progress: 90 });
    }.bind(this),
    500);

  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { id: "App" }, /*#__PURE__*/
      React.createElement(ProgressBar, { progress: this.state.progress })));


  }}

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
//# sourceURL=pen.js
    </script>
</body>
</html>

10. By David Federspiel

Made by David Federspiel. Multiple Gradient Progress Bars. Source

React Progress Bar by David Federspiel
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
.progress-bar-wrapper {
  margin: 10px 0;
}
.progress-bar-wrapper .progress-bar {
  min-height: 40px;
  width: 100%;
}
.progress-bar-wrapper .progress-bar .progress-bar-progress {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  min-width: 0;
  width: 100%;
  transition: all 1s ease;
}
.progress-bar-wrapper .progress-bar .percentage {
  font-weight: bold;
  padding-right: 10px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.progress-bar-wrapper .progress-bar .percentage::after {
  content: "%";
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
      <script>
class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      maxWidth: 0 };

    this.targetPercentage = this.props.value / this.props.maxValue;
  }

  progressBarStyle() {
    return {
      backgroundImage:
      "linear-gradient(" +
      this.props.rotation +
      "deg, " +
      this.props.color +
      ", " +
      this.props.color2 +
      ")",
      maxWidth: this.state.maxWidth,
      backgroundColor: this.props.color,
      borderRadius: this.getRadius() };

  }

  componentDidMount() {
    setTimeout(
    () => this.setState({ maxWidth: this.targetPercentage * 100 + "%" }),
    10);

  }

  getRadius() {
    return (
      "5px " + (this.targetPercentage * 100 >= 100 ? "5px 5px" : "0 0") + " 5px");

  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "progress-bar-wrapper" }, /*#__PURE__*/
      React.createElement("div", { className: "progress-bar" }, /*#__PURE__*/
      React.createElement("div", {
        className: "progress-bar-progress",
        style: this.progressBarStyle() }, /*#__PURE__*/

      React.createElement("div", { className: "percentage" },
      Math.round(this.targetPercentage * 100))))));

  }}


ReactDOM.render( /*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/
React.createElement(ProgressBar, { color: "#FFAAAA", color2: "#550000", value: "250", maxValue: "250", rotation: "270" }), /*#__PURE__*/
React.createElement(ProgressBar, { color: "#661141", color2: "#D49A6A", value: "250", maxValue: "400", rotation: "160" }), /*#__PURE__*/
React.createElement(ProgressBar, { color: "#369", color2: "lightgreen", value: "250", maxValue: "295", rotation: "160" }), /*#__PURE__*/
React.createElement(ProgressBar, { color: "#0E5243", color2: "#857DB1", value: "250", maxValue: "356.8", rotation: "160" })),

document.getElementById("root"));
    </script>
</body>
</html>
 

11. By jimmy mcGee

Made by jimmy mcGee. Simple React Progress Bars. Source

React Progress Bar by jimmy mcGee
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin 0;
}

.progress {
  background-color: #d8d8d8;
  border-radius: 20px;
	position: relative;
	margin: 15px 0;
	height: 30px;
	width: 300px;
}

.progress-done {
  background: linear-gradient(to left, #F2909C,#FF9472);
  box-shadow: 0 3px 3px -5px #F2909C, 0 2px 5px #F2909C;
  border-radius: 20px;
	color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* dynamic - controlled by js */
  height:100%;
  width: 0; /* dynamic - controlled by js */
	transition: 2s ease; 
	/* animation: takes (1 second), type=ease, delay=0.3s */
  
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js'></script>
      <script>
// progress component
const Progress = ({ done }) => {
  // create an empty object to use later see in style
  const [style, setStyle] = React.useState({});

  setTimeout(() => {
    const newStyle = {
      opacity: 1,
      width: `${done}%` };

    setStyle(newStyle);
  }, 1000);

  return /*#__PURE__*/(
    React.createElement("div", { class: "progress" }, /*#__PURE__*/
    React.createElement("div", { class: "progress-done", style: style },
    done, "%")));



};


// app component
// think of this as the html housing - like the body or page
const App = () => /*#__PURE__*/
React.createElement(React.Fragment, null, /*#__PURE__*/
React.createElement("h1", null, "React Progress Bar"), /*#__PURE__*/
React.createElement(Progress, { done: "30" }), /*#__PURE__*/
React.createElement(Progress, { done: "50" }), /*#__PURE__*/
React.createElement(Progress, { done: "70" }), /*#__PURE__*/
React.createElement(Progress, { done: "100" }));


// now add the component to the DOM
// and we target the div we ut int the html i.e with name "app"
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>