Progress Arc

In this example below you will see how to do a Progress Arc with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 025pro, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 025pro ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Progress Arc</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="root"></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  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/025pro/progress-arc-ZKZJLz */
.wrapper,.circle{
  stroke-dasharray: 360;
  stroke-dashoffset: 170;
  transform: rotate(134deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset linear 1s;
  will-change: stroke-dashoffset;
}

text{
  font-family: sans-serif;
  font-size: 20px;
}

.customText{
  font-size: 12px;
}

/*Downloaded from https://www.codeseek.co/025pro/progress-arc-ZKZJLz */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ProgressArc = function (_React$Component) {
  _inherits(ProgressArc, _React$Component);

  function ProgressArc(props) {
    _classCallCheck(this, ProgressArc);

    var _this = _possibleConstructorReturn(this, (ProgressArc.__proto__ || Object.getPrototypeOf(ProgressArc)).call(this, props));

    _this.state = {
      percent: props.percent,
      text: props.text,
      currentPercent: 0
    };
    _this.duration = props.duration === undefined ? 1 : props.duration;
    _this.counterFrameCount = props.frameCount === undefined ? 30 : props.frameCount;
    return _this;
  }

  _createClass(ProgressArc, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.animate(this.state.percent);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        percent: nextProps.percent
      });
      this.animate(nextProps.percent);
    }
  }, {
    key: "animation",
    value: function animation(step) {
      console.log("step:", step);
      var self = this;
      var current = self.state.currentPercent;
      var next = current + step;
      if (next > 100) next = 100;
      if (next < 0) next = 0;

      console.log("next:", next);
      console.log("state", self.state);
      self.setState({
        currentPercent: next
      });
      if (next >= self.state.percent - Math.abs(step) - 1 && next <= self.state.percent + Math.abs(step) + 1) {
        self.setState({
          currentPercent: self.state.percent
        });
        clearInterval(self.timer);
        console.log("end 1");
      }
    }
  }, {
    key: "animate",
    value: function animate(newVal) {
      var _this2 = this;

      if (this.timer) {
        clearInterval(this.timer);
      }
      var step = parseFloat(((newVal - this.state.currentPercent) / this.counterFrameCount).toFixed(4));

      this.timer = setInterval(function () {
        return _this2.animation(step);
      }, this.duration * 1000 / this.counterFrameCount);
    }
  }, {
    key: "getStyle",
    value: function getStyle() {
      var style = {};
      style.strokeDashoffset = 360 - (360 - 170) / 100 * this.state.percent;
      style.transition = "stroke-dashoffset linear " + this.duration + "s";
      return style;
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "svg",
        { width: "100", height: "100" },
        React.createElement("circle", { "stroke-linecap": "round", className: "wrapper", cx: "50", cy: "50", r: "40", fill: "transparent", stroke: "#363a46", strokeWidth: "6" }),
        React.createElement("circle", { style: this.getStyle(), className: "circle", cx: "50", cy: "50", r: "40", fill: "transparent", stroke: "#5C6CB5", strokeWidth: "2" }),
        React.createElement(
          "text",
          { alignmentBaseline: "middle", textAnchor: "middle", x: "50", y: "50", fill: "#9CA0B7" },
          Math.floor(this.state.currentPercent),
          "%"
        ),
        React.createElement(
          "text",
          { className: "customText", alignmentBaseline: "middle", textAnchor: "middle", x: "50", y: "80", fill: "#9CA0B7" },
          this.state.text
        )
      );
    }
  }]);

  return ProgressArc;
}(React.Component);

var App = function (_React$Component2) {
  _inherits(App, _React$Component2);

  function App(props) {
    _classCallCheck(this, App);

    var _this3 = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

    _this3.state = {
      percent: 50
    };
    return _this3;
  }

  _createClass(App, [{
    key: "getRandomInt",
    value: function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var self = this;
      this.timer = setInterval(function () {
        self.setState({
          percent: self.getRandomInt(0, 100)
        });
      }, 5000);
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(ProgressArc, { percent: this.state.percent, text: "Loading" });
    }
  }]);

  return App;
}(React.Component);

ReactDOM.render(React.createElement(App, null), document.getElementById('root'));

Comments