initial

static/assets/scss/volt/components/_progress.scss

@@ -0,0 +1,116 @@
+/**
+ * = Progress bars
+ */
+
+.progress-wrapper {
+    position: relative;
+}
+
+.progress-bar {
+    box-shadow: none;
+    border-radius: 0;
+    height: auto;
+}
+
+.progress {
+    height: 6px;
+    margin-bottom: $spacer;
+    overflow: hidden;
+    background-color: $progress-bg;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-bold;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1))
+}
+
+.progress-xl {
+    height: $progress-xl-size;
+}
+.progress-lg {
+    height: $progress-lg-size;
+}
+.progress-sm {
+    height: $progress-sm-size;
+}
+
+.progress-info{
+    @include display-flex();
+    @include align-items(center);
+    @include justify-content(space-between);
+    margin-bottom: .5rem;
+
+    .progress-label {
+        span {
+            display: inline-block;
+            color: $primary;
+            font-size: $font-size-sm;
+            font-weight: $font-weight-bold;
+        }
+    }
+    
+    .progress-percentage {
+        text-align: right;
+        span {
+            display: inline-block;
+            color: $gray-500;
+            font-size: $font-size-xs;
+            font-weight: $font-weight-bold;
+        }
+    }
+}
+
+.info-xl{
+    .progress-label,
+    .progress-percentage {
+        span {
+            font-size: $font-size-sm;
+        }
+    }
+
+    .progress-percentage {
+        text-align: right;
+    }
+
+}
+
+.progress-tooltip {
+    background: $primary;
+    color: $white;
+    font-weight: $font-weight-bold;
+    padding: .25rem .375rem;
+    line-height: 1;
+    font-size: $font-size-xs;
+    position: relative;
+    border-radius: $border-radius-sm;
+
+    &:after {
+        content: " ";
+        position: absolute;
+        top: 100%;
+        left: 10px;
+        border: solid transparent;
+        height: 0;
+        width: 0;
+        pointer-events: none;
+        border-top-color: $gray;
+        border-width: 6px;
+    }
+}
+
+@-webkit-keyframes animate-positive{
+    0% { width: 0%; }
+}
+@keyframes animate-positive{
+    0% { width: 0%; }
+}
+
+//Tooltip arrow color
+@each $color,
+$value in $theme-colors {
+    .progress-info{
+        .bg-#{$color} {
+            &::after{
+                border-top-color: $value;
+            }
+        }
+    }
+}