Build

Author: Minh Tran

lib/Component.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var React = require('react');
+
+var ProgressBar = React.createClass({
+  displayName: 'ProgressBar',
+
+  propTypes: {
+    percent: React.PropTypes.number.isRequired,
+    onTop: React.PropTypes.bool,
+    autoIncrement: React.PropTypes.bool,
+    intervalTime: React.PropTypes.number
+  },
+  getDefaultProps: function getDefaultProps() {
+    return {
+      percent: -1,
+      onTop: false,
+      autoIncrement: false,
+      intervalTime: 200
+    };
+  },
+  getInitialState: function getInitialState() {
+    return {
+      percent: this.props.percent
+    };
+  },
+  increment: function increment() {
+    var percent = this.state.percent + (Math.random() + 1 - Math.random());
+    percent = percent < 99 ? percent : 99;
+    this.setState({
+      percent: percent
+    });
+  },
+  componentWillUnmount: function componentWillUnmount() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+
+    if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) {
+      this.interval = setInterval(this.increment, nextProps.intervalTime);
+    }
+
+    if (nextProps.percent >= 100) {
+      this.setState({
+        percent: 99.9
+      }, function () {
+        setTimeout((function () {
+          this.setState({
+            percent: 100
+          });
+        }).bind(this), 400);
+      });
+    } else {
+      this.setState({
+        percent: nextProps.percent
+      });
+    }
+  },
+  render: function render() {
+    var className = 'react-progress-bar' + (this.props.onTop ? ' react-progress-bar-on-top' : '');
+    if (this.state.percent < 0 || this.state.percent >= 100) {
+      className += ' react-progress-bar-hide';
+    }
+    var style = { width: this.state.percent + '%' };
+    return React.createElement(
+      'div',
+      { className: className },
+      React.createElement('div', { className: 'react-progress-bar-percent', style: style }),
+      React.createElement(
+        'div',
+        { className: 'react-progress-bar-spinner' },
+        React.createElement('div', { className: 'react-progress-bar-spinner-icon' })
+      )
+    );
+  }
+});
+
+module.exports = ProgressBar;

lib/ProgressBar.js

@@ -0,0 +1,73 @@
+@-webkit-keyframes react-progress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes react-progress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+.react-progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: all 400ms;
+          transition: all 400ms;
+  z-index: 9999999;
+}
+
+.react-progress-bar.react-progress-bar-on-top {
+  height: 100%;
+}
+
+.react-progress-bar.react-progress-bar-hide {
+  opacity: 0;
+  visibility: hidden;
+  z-index: -10;
+}
+
+.react-progress-bar.react-progress-bar-hide .react-progress-bar-percent {
+  width: 0;
+}
+
+.react-progress-bar-percent {
+  height: 2px;
+  background: #29D;
+  box-shadow: 0 0 10px #29D, 0 0 5px #29D;
+  -webkit-transition: all 200ms ease;
+          transition: all 200ms ease;
+  width: 5px;
+}
+
+.react-progress-bar-spinner {
+  display: block;
+  position: fixed;
+  top: 15px;
+  left: 15px;
+}
+
+.react-progress-bar-spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+  -webkit-animation: react-progress-spinner 400ms linear infinite;
+  animation: react-progress-spinner 400ms linear infinite;
+}