content logo

React Progress Bars:

React Liquid Progress Bar for Year

If you care about seasons and years, this post can be helpful for you. In the current code, we are going to explain the React Liquid Progress Bar for Year and its attractive design. This Liquid Progress Bar Code is totally simple and as a result, it fits with most websites with different themes. You can apply this Dark Progress Bar Code in order to display the progress of your website during a year.

We have prepared a preview of this amazing code below, and you can look at it and realize its attraction. As you see here, this React Responsive Progress Bar has a dark background with white writing. There is a field in the middle of the page with a white border. The main background of this field is black, and there is a number in the center. This number shows the progression of your website in white color. Your progress in the year is presented with a liquid design, and its color changes continuously. This liquid bar moves all the time, and as you progress, it moves forward. So, download this Progress Bar Using Date and attract people to your website.

#

Liquid Progress Bar Code

#

React Responsive Progress Bar

#

Dark Progress Bar Code

#

Progress Bar using Date

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
  background-color: #2b2b2b;
  color: #FFF;
  font-family: "Roboto", sans-serif;
}
.container {
  max-width: 500px;
  margin: 50px auto;
}
.container h1 {
  text-align: center;
}
.container .progressbar-container {
  position: relative;
  width: 100%;
  height: 50px;
  border: 1px solid #FFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.container .progressbar-container .progressbar-complete {
  position: absolute;
  left: 0;
  top: 0px;
  height: 100%;
  background-color: #5225bd;
  border-radius: 10px;
  animation: g 2500ms infinite ease-in-out;
  z-index: 2;
}
.container .progressbar-container .progressbar-complete .progressbar-liquid {
  z-index: 1;
  width: 70px;
  height: 70px;
  animation: g 2500ms infinite ease-in-out, r 3000ms infinite cubic-bezier(0.5, 0.5, 0.5, 0.5);
  position: absolute;
  right: -5px;
  top: -10px;
  background-color: #5225bd;
  border-radius: 40%;
}
.container .progressbar-container .progress {
  z-index: 2;
}
@keyframes g {
  0% {
    background-color: #5225bd;
  }
  50% {
    background-color: #607e9e;
  }
  100% {
    background-color: #5225bd;
  }
}
@keyframes r {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}
class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.firstDayOfYear = new Date(new Date().getFullYear(), 0, 1).getTime();
    this.firstDayOfNextYear = new Date(new Date().getFullYear() + 1, 0, 1).getTime();
  }
  getProgress() {
    const now = new Date().getTime();
    return Math.round((now - this.firstDayOfYear) / (this.firstDayOfNextYear - this.firstDayOfYear) * 100);
  }
  render() {
    const progress = this.getProgress();
    return /*#__PURE__*/(
      React.createElement("div", { className: "container" }, /*#__PURE__*/
      React.createElement("h1", null, "Year progress"), /*#__PURE__*/
      React.createElement("div", { className: "progressbar-container" }, /*#__PURE__*/
      React.createElement("div", { className: "progressbar-complete", style: { width: `${progress}%` } }, /*#__PURE__*/
      React.createElement("div", { className: "progressbar-liquid" })), /*#__PURE__*/
      React.createElement("span", { className: "progress" }, progress, "%"))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(ProgressBar, null), document.getElementById("app"));
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<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>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
  background-color: #2b2b2b;
  color: #FFF;
  font-family: "Roboto", sans-serif;
}
.container {
  max-width: 500px;
  margin: 50px auto;
}
.container h1 {
  text-align: center;
}
.container .progressbar-container {
  position: relative;
  width: 100%;
  height: 50px;
  border: 1px solid #FFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.container .progressbar-container .progressbar-complete {
  position: absolute;
  left: 0;
  top: 0px;
  height: 100%;
  background-color: #5225bd;
  border-radius: 10px;
  animation: g 2500ms infinite ease-in-out;
  z-index: 2;
}
.container .progressbar-container .progressbar-complete .progressbar-liquid {
  z-index: 1;
  width: 70px;
  height: 70px;
  animation: g 2500ms infinite ease-in-out, r 3000ms infinite cubic-bezier(0.5, 0.5, 0.5, 0.5);
  position: absolute;
  right: -5px;
  top: -10px;
  background-color: #5225bd;
  border-radius: 40%;
}
.container .progressbar-container .progress {
  z-index: 2;
}
@keyframes g {
  0% {
    background-color: #5225bd;
  }
  50% {
    background-color: #607e9e;
  }
  100% {
    background-color: #5225bd;
  }
}
@keyframes r {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.firstDayOfYear = new Date(new Date().getFullYear(), 0, 1).getTime();
    this.firstDayOfNextYear = new Date(new Date().getFullYear() + 1, 0, 1).getTime();
  }
  getProgress() {
    const now = new Date().getTime();
    return Math.round((now - this.firstDayOfYear) / (this.firstDayOfNextYear - this.firstDayOfYear) * 100);
  }
  render() {
    const progress = this.getProgress();
    return /*#__PURE__*/(
      React.createElement("div", { className: "container" }, /*#__PURE__*/
      React.createElement("h1", null, "Year progress"), /*#__PURE__*/
      React.createElement("div", { className: "progressbar-container" }, /*#__PURE__*/
      React.createElement("div", { className: "progressbar-complete", style: { width: `${progress}%` } }, /*#__PURE__*/
      React.createElement("div", { className: "progressbar-liquid" })), /*#__PURE__*/
      React.createElement("span", { className: "progress" }, progress, "%"))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(ProgressBar, null), document.getElementById("app"));
</script>

</body>
</html>
Preview