Added indeterminate progress bar

diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index e60cbdca01cb6dfc7aa765c7c4d9f49308e28b8e..93a43f6560b69964f4518d57efd6c3af672786ec 100644 (file)
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -34,6 +34,13 @@ meta:
 <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 @@ meta:
 
 {% 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
index 50514062bda8bcd6a56beae1fd881aa3fffd2a78..22a44b621e3064119cdebb2ad840da03ad8a7210 100644 (file)
--- a/sass/elements/progress.sass
+++ b/sass/elements/progress.sass
@@ -31,6 +31,21 @@ $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
@@ -38,3 +53,9 @@ $progress-value-background-color: $text !default
     height: $size-medium
   &.is-large
     height: $size-large
+
+@keyframes progress-indeterminate
+  0%
+    background-position: 200% 0
+  100%
+    background-position: -200% 0