ADD: Progress indeterminate animation

1 files changed, 23 insertions, 1 deletions

diff --git a/src/progress.less b/src/progress.less
index 24c3000..bd4785a 100644
--- a/src/progress.less
+++ b/src/progress.less
@@ -2,13 +2,16 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
+  background: @core-border-color;
   border: 0;
+  border-radius: @border-radius;
   color: @core-color;
   height: .4rem;
+  position: relative;
   width: 100%;
 
   &::-webkit-progress-bar {
-    background: @core-border-color;
+    background: transparent;
     border-radius: @border-radius;
   }
 
@@ -21,4 +24,23 @@
     background: @core-color;
     border-radius: @border-radius;
   }
+
+  &:indeterminate {
+    animation: progress-indeterminate 1.5s linear infinite;
+    background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) no-repeat;
+    background-size: 150% 150%;
+
+    &::-moz-progress-bar {
+      background: transparent;
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }