From 61899e3ede62f26466d2ee11baa62e09d7da7ce5 Mon Sep 17 00:00:00 2001
From: I'm Luis! ^-^ <malbertoa_11@hotmail.com>
Date: Sun, 7 Oct 2018 21:32:48 -0400
Subject: [PATCH] Added indeterminate progress bar

---
 docs/documentation/elements/progress.html | 11 +++++++++++
 sass/elements/progress.sass               | 21 +++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index e60cbdca0..93a43f656 100644
--- 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 50514062b..22a44b621 100644
--- 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
-- 
2.47.3