diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index e60cbdca..93a43f65 100644
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -34,6 +34,13 @@ meta:
{% endcapture %}
+{% capture progress_indeterminate %}
+
+
+
+
+{% 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 50514062..22a44b62 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