ADD: Progress element experimental support

3 files changed, 32 insertions, 2 deletions

diff --git a/src/empty.less b/src/empty.less
index 1108fa2..c1b1964 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,6 +1,6 @@
 // Empty states (or Blank slates)
 .empty {
-  background: @core-empty-bg;
+  background: @core-bg-color;
   border-radius: @border-radius;
   text-align: center;
   padding: 4 * @layout-gutter;
diff --git a/src/progress.less b/src/progress.less
new file mode 100644
index 0000000..c42f8b1
--- /dev/null
+++ b/src/progress.less
@@ -0,0 +1,30 @@
+// Progress
+// Credit: https://css-tricks.com/html5-progress-element/
+.progress {
+  appearance: none;
+  border: 0;
+  color: @core-color;
+  height: .6rem;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background: @core-border-color;
+    border-radius: @border-radius;
+  }
+
+  &::-webkit-progress-value {
+    background: @core-color;
+    border-radius: @border-radius;
+  }
+
+  &::-moz-progress-bar {
+    background: @core-color;
+    border-radius: @border-radius;
+  }
+
+  &.progress-lg {
+    &::after {
+      content: attr(value) '%';
+    }
+  }
+}
diff --git a/src/variables.less b/src/variables.less
index e460eec..a42c673 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -25,7 +25,7 @@
 @core-meta-color: #888;
 @core-link-color: #5764c6;
 @core-border-color: #efefef;
-@core-empty-bg: #f8f8f8;
+@core-bg-color: #f8f8f8;
 @control-color: #c5c5c5;
 @control-color-success: #32b643;
 @control-color-info: #0193eb;