v3 UI

frontend/src/Components/ProgressBar.css

@@ -0,0 +1,93 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.progressBar {
+  position: relative;
+  z-index: 1;
+  float: left;
+  width: 0;
+  height: 100%;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  color: $white;
+  transition: width 0.6s ease;
+}
+
+.frontTextContainer {
+  z-index: 1;
+  color: $white;
+}
+
+.backTextContainer,
+.frontTextContainer {
+  position: absolute;
+  overflow: hidden;
+  width: 0;
+  height: 100%;
+}
+
+.backText,
+.frontText {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 12px;
+  cursor: default;
+}
+
+.primary {
+  background-color: $primaryColor;
+}
+
+.danger {
+  background-color: $dangerColor;
+}
+
+.success {
+  background-color: $successColor;
+}
+
+.purple {
+  background-color: $purple;
+}
+
+.warning {
+  background-color: $warningColor;
+}
+
+.info {
+  background-color: $infoColor;
+}
+
+.small {
+  height: $progressBarSmallHeight;
+
+  .backText,
+  .frontText {
+    height: $progressBarSmallHeight;
+  }
+}
+
+.medium {
+  height: $progressBarMediumHeight;
+
+  .backText,
+  .frontText {
+    height: $progressBarMediumHeight;
+  }
+}
+
+.large {
+  height: $progressBarLargeHeight;
+
+  .backText,
+  .frontText {
+    height: $progressBarLargeHeight;
+  }
+}