Merge pull request #521 from kitematic/container-progress-ui

Added Container Progress component

src/components/ContainerProgress.react.js

@@ -0,0 +1,41 @@
+var React = require('react');
+
+/*
+
+  Usage: <ContainerProgress pBar1={20} pBar2={70} pBar3={100} pBar4={20} />
+
+*/
+var ContainerProgress = React.createClass({
+  render: function () {
+    var pBar1Style = {
+      height: this.props.pBar1 + '%'
+    };
+    var pBar2Style = {
+      height: this.props.pBar2 + '%'
+    };
+    var pBar3Style = {
+      height: this.props.pBar3 + '%'
+    };
+    var pBar4Style = {
+      height: this.props.pBar4 + '%'
+    };
+    return (
+      <div className="container-progress">
+        <div className="bar-1 bar-bg">
+          <div className="bar-1 bar-fg" style={pBar4Style}></div>
+        </div>
+        <div className="bar-2 bar-bg">
+          <div className="bar-2 bar-fg" style={pBar3Style}></div>
+        </div>
+        <div className="bar-3 bar-bg">
+          <div className="bar-3 bar-fg" style={pBar2Style}></div>
+        </div>
+        <div className="bar-4 bar-bg">
+          <div className="bar-4 bar-fg" style={pBar1Style}></div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = ContainerProgress;

styles/container-progress.less

@@ -0,0 +1,35 @@
+.container-progress {
+  width: 100px;
+  height: 100px;
+  border: 4px solid @brand-primary;
+  border-radius: 10px;
+  transform: rotate(180deg);
+  .bar-bg {
+    display: inline-block;
+    position: relative;
+    top: 22px;
+    background-color: @gray-lightest;
+    width: 4px;
+    height: 50px;
+    border-radius: 10px;
+  }
+  .bar-fg {
+    background-color: @brand-primary;
+    width: 4px;
+    height: 0px;
+    border-radius: 10px;
+    transition: 0.3 all;
+  }
+  .bar-1 {
+    left: 21px;
+  }
+  .bar-2 {
+    left: 32px;
+  }
+  .bar-3 {
+    left: 43px;
+  }
+  .bar-4 {
+    left: 54px;
+  }
+}

styles/main.less

@@ -16,6 +16,7 @@
 @import "container-logs.less";
 @import "container-settings.less";
 @import "animation.less";
+@import "container-progress.less";
 
 html, body {
   height: 100%;