Added indeterminate progress bar

jgthms · Oct 28, 2018 · 61899e3 · 61899e3
1 parent 4d2e608
commit 61899e3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
@@ -34,6 +34,13 @@
 <progress class="progress is-large" value="60" max="100">60%</progress>
 {% endcapture %}
 
+{% capture progress_indeterminate %}
+<progress class="progress is-small is-primary" max="100">15%</progress>
+<progress class="progress is-danger" max="100">30%</progress>
+<progress class="progress is-medium is-dark" max="100">45%</progress>
+<progress class="progress is-large is-info" max="100">60%</progress>
+{% endcapture %}
+
 {% include elements/snippet.html content=progress %}
 
 {% include elements/anchor.html name="Colors" %}
@@ -44,4 +51,8 @@
 
 {% include elements/snippet.html content=progress_sizes %}
 
+{% include elements/anchor.html name="Indeterminate" %}
+
+{% include elements/snippet.html content=progress_indeterminate %}
+
 {% include elements/variables.html type='element' %}
diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass
@@ -31,10 +31,31 @@ $progress-value-background-color: $text !default
         background-color: $color
       &::-ms-fill
         background-color: $color
+
+  &:indeterminate
+    &::-webkit-progress-bar
+      background-color: transparent
+    &::-moz-progress-bar
+      background-color: transparent
+
+    animation: progress-indeterminate 1.5s linear infinite
+    background: $progress-bar-background-color linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) top left / 150% 150% no-repeat
+
+    @each $name, $pair in $colors
+      $color: nth($pair, 1)
+      &.is-#{$name}
+        background: $progress-bar-background-color linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) top left / 150% 150% no-repeat
+
   // Sizes
   &.is-small
     height: $size-small
   &.is-medium
     height: $size-medium
   &.is-large
     height: $size-large
+
+@keyframes progress-indeterminate
+  0%
+    background-position: 200% 0
+  100%
+    background-position: -200% 0